import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Link } from "react-router"

const SignUp = ({
    heading = "Signup",
    logo = {
        // url: "https://www.shadcnblocks.com",
        // src: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/logos/shadcnblockscom-wordmark.svg",
        alt: "logo",
        title: "shadcnblocks.com",
    },
    buttonText = "Create Account",
    signupText = "Already a user?",
}) => {
    return (
        <section className="bg-muted h-screen">
            <div className="flex h-full items-center justify-center">
                {/* Logo */}
                <div className="flex flex-col items-center gap-6 lg:justify-start">
                    <a href={logo.url}>
                        <img
                            src={logo.src}
                            alt={logo.alt}
                            title={logo.title}
                            className="h-10 dark:invert"
                        />
                    </a>
                    <div className="min-w-sm border-muted bg-background flex w-full max-w-sm flex-col items-center gap-y-4 rounded-md border px-6 py-8 shadow-md">
                        {heading && <h1 className="text-xl font-semibold">{heading}</h1>}
                        <Input
                            type="email"
                            placeholder="Email"
                            className="text-sm"
                            required
                        />
                        <Input
                            type="password"
                            placeholder="Password"
                            className="text-sm"
                            required
                        />
                        <Input
                            type="password"
                            placeholder="Confirm Password"
                            className="text-sm"
                            required
                        />
                        <Button type="submit" className="w-full">
                            {buttonText}
                        </Button>
                    </div>
                    <div className="text-muted-foreground flex justify-center gap-1 text-sm">
                        <p>{signupText}</p>
                        <a
                            className="text-primary font-medium hover:underline"
                        >
                            <Link to="/auth/login">Login</Link>
                        </a>
                    </div>
                </div>
            </div>
        </section>
    );
};

export { SignUp };