import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";

interface Signup4Props {
  heading?: string;
  logo: {
    url: string;
    src: string;
    alt: string;
    title: string;
  };
  className?: string;
  signupText?: string;
  emailLabel?: string;
  passwordLabel?: string;
  emailPlaceholder?: string;
  passwordPlaceholder?: string;
  googleText?: string;
  googleIconAlt?: string;
  facebookText?: string;
  facebookIconAlt?: string;
  githubText?: string;
  githubIconAlt?: string;
  loginText?: string;
  loginLinkText?: string;
  loginUrl?: string;
}

const Signup4 = ({
  className,
  heading = "ایجاد حساب کاربری",
  logo = {
    url: "https://www.ShadcnBlocks",
    src: "/block-media/shadcnblocks/block/block-1.svg",
    alt: "نام تجاری",
    title: "نوافروش",
  },
  signupText = "ایجاد حساب کاربری",
  emailLabel = "ایمیل",
  passwordLabel = "رمز عبور",
  emailPlaceholder = "ایمیل",
  passwordPlaceholder = "رمز عبور (حداقل ۸ کاراکتر)",
  googleText = "ادامه با گوگل",
  googleIconAlt = "گوگل",
  facebookText = "ثبت‌نام با فیسبوک",
  facebookIconAlt = "فیسبوک",
  githubText = "ثبت‌نام با گیت‌هاب",
  githubIconAlt = "گیت‌هاب",
  loginText = "قبلاً ثبت‌نام کرده‌اید؟",
  loginLinkText = "ورود به حساب",
  loginUrl = "#",
}: Signup4Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("h-screen", className)}
    >
      <div className="flex h-full items-center justify-center">
        <div className="flex w-full max-w-sm flex-col items-center gap-y-8">
          <div className="flex flex-col items-center gap-y-2">
            <div className="flex items-center gap-1 lg:justify-start">
              <a href={logo.url}>
                <img
                  src={logo.src}
                  alt={logo.alt}
                  title={logo.title}
                  className="h-12"
                />
              </a>
            </div>
            <h1 className="text-xl font-semibold">{heading}</h1>
          </div>
          <div className="flex w-full flex-col gap-8 rounded-md border border-input bg-background px-6 py-12">
            <div className="flex flex-col gap-4">
              <div className="flex flex-col gap-2">
                <Label>{emailLabel}</Label>
                <Input
                  type="email"
                  placeholder={emailPlaceholder}
                  required
                  className="bg-background"
                />
              </div>
              <div className="flex flex-col gap-2">
                <Label>{passwordLabel}</Label>
                <Input
                  type="password"
                  placeholder={passwordPlaceholder}
                  required
                  className="bg-background"
                />
              </div>
              <Button type="submit" className="mt-2 w-full">
                {signupText}
              </Button>
            </div>
            <div className="flex flex-col gap-2">
              <div className="grid gap-4">
                <Button variant="outline" className="w-full">
                  <img
                    src="/block-media/shadcnblocks/block/logos/google-icon.svg"
                    alt={googleIconAlt}
                    className="size-5"
                  />
                  {googleText}
                </Button>
                <Button variant="outline" className="w-full">
                  <img
                    src="/block-media/shadcnblocks/block/logos/github-icon.svg"
                    alt={githubIconAlt}
                    className="size-5"
                  />
                  {githubText}
                </Button>
                <Button variant="outline" className="w-full">
                  <img
                    src="/block-media/shadcnblocks/block/logos/facebook-icon.svg"
                    alt={facebookIconAlt}
                    className="size-5"
                  />
                  {facebookText}
                </Button>
              </div>
            </div>
          </div>
          <div className="flex justify-center gap-1 text-sm text-muted-foreground">
            <p>{loginText}</p>
            <a
              href={loginUrl}
              className="font-medium text-primary hover:underline"
            >
              {loginLinkText}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Signup4 };