import { FcGoogle } from "react-icons/fc";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

interface Hyperlink {
  label: string;
  href: string;
}

interface AcceptInvite1Props {
  companyLogo?: string;
  disclaimer?: string;
  disclaimerLink?: Hyperlink;
  heading?: string;
  description?: string[];
  copyright?: string;
  footerLinks?: Hyperlink[];
}

const AcceptInvite1 = ({
  companyLogo = "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo-word.svg",
  disclaimer = "با وارد کردن ایمیل خود، با دریافت به‌روزرسانی‌ها و پیام‌های بازاریابی از آکمه موافقت می‌کنید. هر زمان می‌توانید اشتراک را لغو کنید. برای جزئیات بیشتر، ",
  disclaimerLink = {
    label: "سیاست حریم خصوصی",
    href: "#",
  },
  heading = "به آکمه خوش آمدید",
  description = [
    "آکمه پلتفرمی نسل جدید است که برای ساده‌سازی گردش کار شما طراحی شده. با انعطاف‌پذیری در طراحی، با نیازهای منحصربه‌فرد کسب‌وکار شما سازگار می‌شود.",
    "پروژه‌های خود را مدیریت کنید، با تیم همکاری کنید و پیشرفت را در یک داشبورد متمرکز دنبال کنید.",
    "همین امروز شروع کنید.",
  ],
  copyright = `© ${new Date().getFullYear().toLocaleString("fa-IR")} آکمه`,
  footerLinks = [
    { label: "حریم خصوصی", href: "#" },
    {
      label: "پشتیبانی",
      href: "#",
    },
  ],
}: AcceptInvite1Props) => {
  return (
    <section dir="rtl" lang="fa" className="container py-32">
      <div className="flex w-full flex-col gap-20 text-start sm:items-center">
        <img
          src={companyLogo}
          alt="لوگوی شرکت"
          className="w-54 dark:invert"
        />

        <div className="flex flex-col-reverse items-start gap-10 sm:rounded-2xl sm:border sm:px-10 sm:pt-10 sm:pb-10 md:flex-row md:pt-20 lg:gap-20 lg:rounded-3xl lg:px-24 lg:pt-36 xl:gap-40">
          <div className="flex w-full flex-col gap-6 sm:max-w-sm md:gap-60">
            <div className="flex flex-col gap-6">
              <Button type="button" variant="outline">
                <FcGoogle />
                ادامه با گوگل
              </Button>
              <span className="h-px w-full bg-border" />
              <form autoComplete="off" className="flex flex-col gap-3">
                <Input placeholder="ایمیل خود را وارد کنید" required />
                <Button type="submit">ادامه</Button>
              </form>
            </div>
            <p className="text-xs text-muted-foreground">
              {disclaimer}
              <a href={disclaimerLink.href} className="underline">
                {disclaimerLink.label}
              </a>
              .
            </p>
          </div>
          <div className="flex w-full flex-col gap-4 sm:max-w-sm">
            <h3 className="text-xl font-bold">{heading}</h3>
            <div className="space-y-4 text-sm font-medium text-muted-foreground">
              {description.map((item, index) => (
                <p key={index}>{item}</p>
              ))}
            </div>
          </div>
        </div>

        <div className="flex flex-wrap items-center gap-4 text-xs text-muted-foreground">
          <p>{copyright}</p>
          {footerLinks.map((link) => (
            <a key={link.label} href={link.href} className="underline">
              {link.label}
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export { AcceptInvite1 };