import Image from "next/image";
import sign_in_icon from "./icons/sign-in_icon.svg";
import { Link } from "@/shared/config/navigation";
import { Container } from "@/shared/ui";
import SignInForm from "@/widgets/forms/SignInForm";
import { useTranslations } from "next-intl";

const SignIn = () => {
  const t = useTranslations("signIn");

  return (
    <Container>
      <div className="h-full min-h-[800px] w-full flex justify-center">
        <div className="flex flex-col items-center gap-6">
          <div className="w-[48px] h-[48px] flex items-center justify-center rounded-sm border">
            <Image src={sign_in_icon} alt="Sign In Icon" />
          </div>
          <div className="mb-2 flex flex-col items-center gap-2 text-center">
            <h2 className="text-[24px] font-bold leading-8 text-gray-900">
              {t("login")}
            </h2>
            <p className="text-gray-500">{t("info")}</p>
          </div>

          <SignInForm />
          <p className="text-[14px] font-semibold leading-5 text-gray-500">
            {t("noAccount")}{" "}
            <Link
              className="text-[14px] font-semibold leading-5 text-light-blue"
              href="/sign-up"
            >
              {t("register")}
            </Link>
          </p>
        </div>
      </div>
    </Container>
  );
};

export default SignIn;