'use client';
import { Button, TextInput } from '@sdt/sdt-ui-kit';
import Link from 'next/link';
import useLogin from '../hooks/useLogin';
import { emailRegex, passwordRegex } from '@/utils/reg';

interface LoginPropsType {}

function Login({}: LoginPropsType) {
  const {
    hookForm: { handleSubmit, register, formState },
  } = useLogin();
  return (
    <div className="flex justify-center items-center w-full h-screen bg-cover bg-center">
      <div className="w-[37.5rem] shadow-md border rounded-[16px] px-10 sm:px-14 lg:px-5 py-7 sm:py-9 flex flex-col justify-center">
        <form onSubmit={handleSubmit((data) => console.log(data))}>
          <div className="mt-5 flex flex-col">
            <TextInput
              {...register('email', {
                required: '이메일을 입력하세요.',
                pattern: {
                  value: emailRegex,
                  message: '올바른 이메일을 입력하세요.',
                },
              })}
              error={!!formState.errors.email}
              message={(formState.errors.email?.message as string) ?? ''}
              maxLength={40}
              type="text"
              className={`rounded-t-[6px] text-[20px] w-full`}
              placeholder="이메일 주소"
            />
          </div>
          <div className="flex flex-col">
            <TextInput
              {...register('password', {
                required: '비밀번호를 다시 입력하세요.',
                pattern: {
                  value: passwordRegex,
                  message:
                    '8~16자 영문 대 소문자, 숫자, 특수문자를 사용하세요.',
                },
              })}
              error={!!formState.errors.password?.message}
              message={(formState.errors.password?.message as string) ?? ''}
              maxLength={16}
              type="password"
              className={`rounded-b-[6px] text-[20px] w-full border-t-none`}
              placeholder="비밀번호"
            />
          </div>
          <div className="flex justify-center items-center">
            <Button
              type="submit"
              className={`mt-8 text-[20px] font-semibold w-full bg-main`}
              backgroundColor="bg-teal-500"
            >
              로그인
            </Button>
          </div>
        </form>

        <div className="w-full mt-2 flex justify-center">
          <span className="mr-3 text-[#9e9e9e]">비밀번호를 잊으셨나요?</span>
          <Link href={'/reset-password'}>비밀번호 재설정</Link>
        </div>
      </div>
    </div>
  );
}

export default Login;