import React from "react";

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

interface Waitlist3Props {
  companyLogo?: string;
  badge?: string;
  heading?: string;
  description?: string;
  joinedPeople?: number;
  avatars?: string[];
  companyName?: string;
  companyUrl?: string;
  image?: string;
  className?: string;
}

const Waitlist3 = ({
  companyLogo = "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
  badge = "به‌زودی  سه‌ماهه اول ۱۴۰۵",
  heading = "نسل بعدی ابزارهای توسعه را می‌سازید؟",
  description = "با ثبت ایمیل در برنامه دسترسی زودهنگام، به ابزارهای توسعه پیشرفته دسترسی پیدا کنید و زودتر از همه آینده برنامه‌نویسی را تجربه کنید.",
  joinedPeople = 165,
  avatars = [
    "/block-media/shadcnblocks/block/portraits/alexander-hipp-iEEBWgY_6lA-unsplash.jpg",
    "/block-media/shadcnblocks/block/portraits/michael-dam-mEZ3PoFGs_k-unsplash.jpg",
    "/block-media/shadcnblocks/block/portraits/nima-motaghian-nejad-_omdf_EgRUo-unsplash.jpg",
  ],
  companyName = "Ramp",
  companyUrl = "https://ShadcnBlocks",
  image = "/block-media/shadcnblocks/block/photos/ivan-bandura-hqnUYXsN5oY-unsplash.jpg",
  className,
}: Waitlist3Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32 lg:h-screen", className)}>
      <div className="container h-full">
        <div className="grid h-full grid-cols-1 gap-20 lg:grid-cols-2 lg:gap-0">
          <div className="col-span-1 flex h-full flex-col items-start justify-between gap-20">
            <img
              src={companyLogo}
              alt="لوگوی شرکت"
              className="w-32 dark:invert"
            />

            <div className="flex max-w-sm flex-col gap-4 sm:max-w-full lg:max-w-md">
              <Badge variant="outline">{badge}</Badge>

              <h3 className="text-start text-3xl font-semibold lg:text-xl">
                {heading}
              </h3>

              <p className="max-w-md text-start text-muted-foreground">
                {description}
              </p>

              <div className="mt-2 flex flex-col gap-4">
                <form className="flex gap-2">
                  <Input
                    type="email"
                    required
                    placeholder="ایمیل خود را وارد کنید"
                  />
                  <Button type="submit" className="shrink-0">
                    پیوستن به لیست انتظار
                  </Button>
                </form>

                <div className="flex items-center">
                  <div className="relative flex items-center">
                    {avatars.map((avatar, index) => {
                      return (
                        <img
                          key={`waitlist-avatar-${index}`}
                          src={avatar}
                          alt={`عضو ${(index + 1).toLocaleString("fa-IR")}`}
                          style={{
                            transform: `translateX(-${index * 10}px)`,
                          }}
                          className="size-8 rounded-full border bg-muted object-cover object-top p-px"
                        />
                      );
                    })}
                    <p
                      style={{
                        transform: `translateX(-${(avatars.length - 2) * 10}px)`,
                      }}
                      className="text-xs text-muted-foreground"
                    >
                      بیش از {joinedPeople.toLocaleString("fa-IR")} نفر قبلاً
                      پیوسته‌اند
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <p className="text-start text-xs text-muted-foreground">
              © {new Date().getFullYear().toLocaleString("fa-IR")} {" "}
              <a
                href={companyUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="text-primary underline"
              >
                {companyName}
              </a>{" "}
               تمامی حقوق محفوظ است.
            </p>
          </div>
          <div className="col-span-1 flex h-full flex-col items-start justify-between overflow-hidden">
            <img
              src={image}
              alt="تصویر لیست انتظار"
              className="h-full max-h-96 w-full object-cover lg:max-h-full"
            />
          </div>
        </div>
      </div>
    </section>
  );
};

export { Waitlist3 };