import React from "react";

import { BackgroundLines } from "@/components/aceternity/background-lines";
import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

interface Waitlist1Props {
  className?: string;
}

const JOINED_COUNT = 1000;

const Waitlist1 = ({ className }: Waitlist1Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "flex w-full min-h-[32rem] items-center justify-center overflow-hidden py-16 md:min-h-[40rem] md:py-24",
        className,
      )}
    >
      <BackgroundLines className="container flex h-auto min-h-[32rem] w-full flex-col items-center justify-center px-4 md:h-auto md:min-h-[40rem]">
        <h2 className="relative z-20 py-2 text-center font-sans text-2xll font-semibold tracking-tighter md:py-10 lg:text-8xl">
          به لیست انتظار بپیوندید
        </h2>
        <p className="text-md mx-auto max-w-xl text-center text-muted-foreground lg:text-lg">
          زودتر از همه از راه‌اندازی مطلع شوید. با ثبت ایمیل، دسترسی زودهنگام و
          مزایای ویژه دریافت کنید.
        </p>
        <div className="relative z-20 mx-auto mt-10 flex w-full max-w-md items-center justify-center gap-3 rounded-full p-1">
          <Input
            type="email"
            className="h-10 w-full rounded-xl border-none bg-muted shadow-none ring-0 focus-visible:ring-0 focus-visible:outline-none active:ring-0 active:outline-0"
            placeholder="ایمیل خود را وارد کنید"
          />
          <Button className="h-10 shrink-0 rounded-xl">
            پیوستن به لیست انتظار
          </Button>
        </div>
        <div className="mt-10 flex items-center justify-center gap-2">
          <span className="inline-flex items-center -space-x-2.5">
            {Array.from({ length: 6 }).map((_, index) => (
              <Avatar key={index} className="size-8">
                <AvatarImage
                  src={`/block-media/shadcnblocks/block/guri3/avatar${index + 1}.png`}
                  alt={`عضو ${(index + 1).toLocaleString("fa-IR")}`}
                />
              </Avatar>
            ))}
          </span>
          <p className="tracking-tight text-muted-foreground/80">
            بیش از {JOINED_COUNT.toLocaleString("fa-IR")} نفر قبلاً پیوسته‌اند
          </p>
        </div>
      </BackgroundLines>
    </section>
  );
};

export { Waitlist1 };