"use client";

import { useState } from "react";
import Link from "next/link";
import LayoutLogin from "@/components/LayoutLogin";
import Button from "@/components/Button";
import Image from "@/components/Image";
import Field from "@/components/Field";

const SignUpPage = () => {
    const [fullName, setFullName] = useState("");
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    return (
        <LayoutLogin
            title="Hello There"
            description={
                <>
                    Already have an account?{" "}
                    <Link className="text-blue-500" href="/auth/sign-in">
                        Sign in
                    </Link>{" "}
                    here
                </>
            }
        >
            <div className="">
                <Button
                    className="gap-4.5 w-full !h-12 !rounded-xl !text-label-md text-sub-600"
                    isStroke
                >
                    <Image
                        className="w-5 opacity-100"
                        src="/images/google.svg"
                        width={20}
                        height={20}
                        alt="Google"
                    />
                    Continue with Google
                </Button>
                <div className="flex items-center gap-3.5 my-6 text-center text-label-md text-soft-400 before:grow before:h-0.25 before:bg-stroke-soft-200 after:grow after:h-0.25 after:bg-stroke-soft-200 max-md:my-3">
                    Or
                </div>
                <div className="flex flex-col gap-4.5">
                    <Field
                        placeholder="Enter full name"
                        value={fullName}
                        onChange={(e) => setFullName(e.target.value)}
                        required
                    />
                    <Field
                        placeholder="Enter email"
                        value={email}
                        type="email"
                        onChange={(e) => setEmail(e.target.value)}
                        required
                    />
                    <Field
                        placeholder="Enter password"
                        value={password}
                        type="password"
                        onChange={(e) => setPassword(e.target.value)}
                        required
                    />
                    <Button
                        className="w-full !h-12 !rounded-xl"
                        isBlue
                        as="link"
                        href="/"
                    >
                        Create account
                    </Button>
                </div>
                <div className="mt-5 text-center">
                    <Link
                        className="text-label-sm text-blue-500 transition-colors hover:text-blue-700"
                        href="/auth/forgot-password"
                    >
                        Forgotten Password?
                    </Link>
                </div>
            </div>
        </LayoutLogin>
    );
};

export default SignUpPage;