import { FC, memo } from "react";
import IconArrow from "../../../assets/images/tg_arrow.svg";
import { cn } from "../utils";

interface PropsType {
  email: string;
  handleClick: () => void;
  btnStyle?: { textColor?: string; bgColor?: string };
}
const ContinueButton: FC<PropsType> = ({ handleClick, btnStyle }) => {
  // const disabled = useMemo(() => {
  //   if (!email) return true;
  //   return !validEmail(email);
  // }, [email]);
  const { textColor, bgColor } = btnStyle || {
    textColor: "white",
    bgColor: "#7D5DFF",
  };
  return (
    <div className="uikit-flex uikit-justify-center">
      <div
        onClick={() => {
          // if (disabled) return;
          handleClick?.();
        }}
        className={cn(
          "uikit-mt-[10px] uikit-select-none uikit-flex uikit-gap-2 uikit-px-[24px] uikit-justify-center uikit-items-center uikit-h-[44px] uikit-cursor-pointer uikit-rounded-[32px] hover:uikit-opacity-50",
          {
            // "uikit-cursor-pointer hover:uikit-opacity-90": !disabled,
            // "uikit-cursor-not-allowed uikit-opacity-20": disabled,
          },
        )}
        style={{
          backgroundColor: bgColor,
        }}
      >
        {/* <IconArrow /> */}
        <img className="uikit-w-[20px] uikit-h-[20px]" src={IconArrow} alt="" />
        <span
          style={{ color: textColor }}
          className="uikit-font-switzerMedium uikit-text-[16px] uikit-font-medium uikit-flex uikit-gap-1"
        >
          Continue
        </span>
      </div>
    </div>
  );
};

export default memo(ContinueButton);