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

interface Signup6Props {
  className?: string;
  logo: {
    url: string;
    src: string;
    alt: string;
    title?: string;
  };
  buttonText?: string;
  googleText?: string;
  googleIconAlt?: string;
  emailLabel?: string;
  passwordLabel?: string;
  confirmPasswordLabel?: string;
  emailPlaceholder?: string;
  passwordPlaceholder?: string;
  confirmPasswordPlaceholder?: string;
  signupText?: string;
  signupUrl?: string;
  loginLinkText?: string;
}

const Signup6 = ({
  className,
  logo = {
    url: "https://www.ShadcnBlocks",
    src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo-word.svg",
    alt: "نام تجاری",
    title: "نوافروش",
  },
  buttonText = "شروع رایگان",
  googleText = "ادامه با گوگل",
  googleIconAlt = "گوگل",
  emailLabel = "ایمیل",
  passwordLabel = "رمز عبور",
  confirmPasswordLabel = "تکرار رمز عبور",
  emailPlaceholder = "ایمیل",
  passwordPlaceholder = "رمز عبور (حداقل ۸ کاراکتر)",
  confirmPasswordPlaceholder = "تأیید رمز عبور",
  signupText = "قبلاً ثبت‌نام کرده‌اید؟",
  signupUrl = "https://ShadcnBlocks",
  loginLinkText = "ورود به حساب",
}: Signup6Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("h-screen bg-background", className)}
    >
      <div className="flex h-full items-center justify-center">
        <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="flex w-full max-w-sm min-w-sm flex-col items-center gap-y-4 rounded-lg border px-6 py-12">
            <Button type="button" className="w-full">
              <img
                src="/block-media/shadcnblocks/block/logos/google-icon.svg"
                className="ms-2 size-4"
                alt={googleIconAlt}
              />
              {googleText}
            </Button>

            <div className="relative flex w-full items-center justify-center py-6">
              <div className="absolute h-px w-full border-t border-border"></div>
            </div>

            <div className="flex w-full flex-col gap-2">
              <Label>{emailLabel}</Label>
              <Input
                type="email"
                placeholder={emailPlaceholder}
                className="bg-background text-sm"
                required
              />
            </div>
            <div className="flex w-full flex-col gap-2">
              <Label>{passwordLabel}</Label>
              <Input
                type="password"
                placeholder={passwordPlaceholder}
                className="bg-background text-sm"
                required
              />
            </div>
            <div className="flex w-full flex-col gap-2">
              <Label>{confirmPasswordLabel}</Label>
              <Input
                type="password"
                placeholder={confirmPasswordPlaceholder}
                className="bg-background text-sm"
                required
              />
            </div>
            <Button type="submit" className="w-full" variant="secondary">
              {buttonText}
            </Button>
          </div>
          <div className="flex justify-center gap-1 text-sm text-muted-foreground">
            <p>{signupText}</p>
            <a
              href={signupUrl}
              className="font-medium text-primary hover:underline"
            >
              {loginLinkText}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Signup6 };