"use client";

import AutoScroll from "embla-carousel-auto-scroll";
import React from "react";

import { Button } from "@/components/ui/button";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import { Input } from "@/components/ui/input";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

interface Signup9Logo {
  id: string;
  description: string;
  image: string;
  className: string;
}

interface Signup9Props {
  className?: string;
  heading?: string;
  googleText?: string;
  googleIconAlt?: string;
  dividerText?: string;
  emailPlaceholder?: string;
  continueButtonText?: string;
  loginPromptText?: string;
  loginUrl?: string;
  loginLinkText?: string;
  logoAlt?: string;
  logos?: Signup9Logo[];
}

const defaultLogos: Signup9Logo[] = [
  {
    id: "logo-1",
    description: "لوگوی Astro",
    image: "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
    className: "h-6 w-auto",
  },
  {
    id: "logo-2",
    description: "لوگوی شرکت ۱",
    image:
      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
    className: "h-6 w-auto",
  },
  {
    id: "logo-3",
    description: "لوگوی شرکت ۲",
    image:
      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
    className: "h-6 w-auto",
  },
  {
    id: "logo-4",
    description: "لوگوی شرکت ۳",
    image:
      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
    className: "h-6 w-auto",
  },
  {
    id: "logo-5",
    description: "لوگوی شرکت ۴",
    image:
      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
    className: "h-6 w-auto",
  },
];

const Signup9 = ({
  className,
  heading = "فضای کاری رایگان بسازید",
  googleText = "ادامه با گوگل",
  googleIconAlt = "گوگل",
  dividerText = "یا",
  emailPlaceholder = "ایمیل",
  continueButtonText = "ادامه",
  loginPromptText = "قبلاً ثبت‌نام کرده‌اید؟",
  loginUrl = "#",
  loginLinkText = "ورود به حساب",
  logoAlt = "لوگو",
  logos = defaultLogos,
}: Signup9Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("bg-background", className)}
    >
      <div className="container flex min-h-screen items-center justify-center py-4">
        <div className="mx-auto flex w-full max-w-xl flex-col items-center gap-6">
          <div className="flex h-14 w-14 items-center justify-center">
            <img
              className="h-14 w-12"
              alt={logoAlt}
              src="/block-media/shadcnblocks/block/block-1.svg"
            />
          </div>

          <h1 className="mb-8 w-full text-center text-3xl font-medium tracking-tighter text-foreground md:text-xl">
            {heading}
          </h1>

          <Button
            type="button"
            variant="outline"
            className="flex h-14 w-full max-w-lg items-center justify-center gap-8 rounded-full border-muted-foreground/30"
          >
            <img
              className="h-5 w-5"
              alt={googleIconAlt}
              src="/block-media/shadcnblocks/block/logos/google-icon.svg"
            />
            <span className="font-medium">{googleText}</span>
          </Button>

          <div className="flex w-full max-w-lg items-center gap-6">
            <Separator className="flex-1" />
            <span className="font-medium tracking-tight">{dividerText}</span>
            <Separator className="flex-1" />
          </div>

          <div className="w-full max-w-lg">
            <Input
              type="email"
              className="h-14 rounded-full border-none bg-muted px-5 py-4 font-medium"
              placeholder={emailPlaceholder}
              required
            />
          </div>

          <Button
            type="submit"
            className="h-14 w-full max-w-lg rounded-full bg-foreground text-background hover:bg-foreground/90"
          >
            <span className="font-medium tracking-tight">
              {continueButtonText}
            </span>
          </Button>

          <p className="mb-8 w-full text-center text-sm font-medium tracking-tight text-muted-foreground">
            {loginPromptText}{" "}
            <a href={loginUrl} className="cursor-pointer underline">
              {loginLinkText}
            </a>
          </p>

          <div className="relative mx-auto flex items-center justify-center opacity-20">
            <Carousel
              dir="rtl"
              opts={{ loop: true, direction: "rtl" }}
              plugins={[AutoScroll({ playOnInit: true })]}
            >
              <CarouselContent className="ms-0">
                {logos.map((logo) => (
                  <CarouselItem
                    key={logo.id}
                    className="flex basis-1/3 justify-center sm:basis-1/4 md:basis-1/5 lg:basis-1/4"
                  >
                    <div className="flex shrink-0 items-center justify-center lg:mx-10">
                      <img
                        src={logo.image}
                        alt={logo.description}
                        className={logo.className}
                      />
                    </div>
                  </CarouselItem>
                ))}
              </CarouselContent>
            </Carousel>
            <div className="pointer-events-none absolute inset-y-0 inset-s-0 w-12 bg-linear-to-e from-background to-transparent" />
            <div className="pointer-events-none absolute inset-y-0 inset-e-0 w-12 bg-linear-to-s from-background to-transparent" />
          </div>
        </div>
      </div>
    </section>
  );
};

export { Signup9 };