import { FC, memo } from "react";
import { cn } from "../utils";

interface PropsType {
  email: string;
  setEmail: (email: string) => void;
  emailError: string;
  setEmailError: (error: string) => void;
  isFocus: boolean;
  setIsFocus: (isFocus: boolean) => void;
}
const EmailInput: FC<PropsType> = ({
  email,
  setEmail,
  setEmailError,
  emailError,
  isFocus,
  setIsFocus,
}) => {
  return (
    <>
      <div
        className={cn(
          "uikit-flex uikit-items-center uikit-justify-between uikit-gap-2 uikit-h-[54px] uikit-border uikit-border-solid uikit-rounded-[8px] uikit-pl-[14px] uikit-pr-[10px] uikit-bg-[var(--uikit-colors-reverse)]",
          {
            "uikit-border-border": !isFocus,
          },
          { "uikit-border-[var(--uikit-colors-primary)]": isFocus },
        )}
      >
        <input
          type="text"
          placeholder="Enter your email"
          className="uikit-text-[14px] uikit-border-none uikit-outline-none uikit-flex-1 uikit-bg-transparent uikit-text-primary placeholder:uikit-text-[#C1C0D8]"
          value={email}
          onFocus={() => {
            setIsFocus(true);
          }}
          onBlur={() => {
            setIsFocus(false);
          }}
          onChange={async (e) => {
            setEmailError("");
            const v = e.target.value;
            setEmail(v);
          }}
        />
      </div>
      {emailError && (
        <div className="uikit-py-1 uikit-text-[#EB4B6D] uikit-text-[12px]">
          {emailError}
        </div>
      )}
    </>
  );
};

export default memo(EmailInput);