import { ChevronRight } from "lucide-react";
import React from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface Signup8Props {
  className?: string;
  badgeText?: string;
  headingLine1?: string;
  headingLine2?: string;
  headingLine3?: string;
  description?: string;
  googleText?: string;
  googleIconAlt?: string;
  emailButtonText?: string;
  noCreditCardText?: string;
  previewLogoAlt?: string;
}

const Signup8 = ({
  className,
  badgeText = "بلوک‌های آماده برای توسعه اپلیکیشن",
  headingLine1 = "بلوک‌های آماده",
  headingLine2 = "با Shadcn UI",
  headingLine3 = "و Tailwind.",
  description = "مجموعه‌ای از کامپوننت‌های آماده و استاندارد بر پایه رابط کاربری، استایل‌دهی مدرن و نوافروش که می‌توانید مستقیماً در پروژه خود استفاده کنید.",
  googleText = "ادامه با گوگل",
  googleIconAlt = "گوگل",
  emailButtonText = "ثبت‌نام با ایمیل",
  noCreditCardText = "نیاز به کارت اعتباری نیست",
  previewLogoAlt = "لوگو",
}: Signup8Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("bg-background py-32", className)}
    >
      <div className="relative container flex flex-col items-center">
        <div className="flex w-full flex-col items-center justify-between gap-8 overflow-hidden rounded-3xl border-border p-4 sm:border lg:flex-row lg:p-12">
          <div className="flex w-full flex-col gap-8">
            <Badge
              variant="outline"
              className="flex w-fit items-center gap-4 rounded-full px-6 py-2"
            >
              <span className="text-sm font-medium text-muted-foreground">
                {badgeText}
              </span>
              <ChevronRight className="size-4! rtl:rotate-180" />
            </Badge>

            <h1 className="text-2xll font-semibold tracking-tighter">
              {headingLine1}
              <br />
              {headingLine2}
              <br />
              {headingLine3}
            </h1>

            <p className="text-xl font-normal tracking-tight text-muted-foreground">
              {description}
            </p>

            <div className="flex w-full flex-col gap-4">
              <Button
                type="button"
                className="text-md h-12 w-full rounded-lg bg-primary text-primary-foreground"
              >
                <img
                  src="/block-media/shadcnblocks/block/logos/google-icon.svg"
                  alt={googleIconAlt}
                  className="size-4"
                />
                {googleText}
              </Button>

              <Button
                type="button"
                variant="outline"
                className="text-md h-12 w-full rounded-lg"
              >
                {emailButtonText}
              </Button>
            </div>

            <p className="text-center text-sm text-muted-foreground">
              {noCreditCardText}
            </p>
          </div>

          <div className="w-full">
            <div className="ms-0 flex h-[500px] w-full flex-col items-center justify-center rounded-3xl border border-border bg-muted p-2 lg:ms-32">
              <Card className="relative h-full w-full rounded-2xl border">
                <CardContent className="flex h-full w-full items-center justify-center p-0">
                  <div className="absolute top-4 inset-s-4 flex items-center gap-2">
                    <div className="size-3.5 rounded-full bg-red-500" />
                    <div className="size-3.5 rounded-full bg-yellow-500" />
                    <div className="size-3.5 rounded-full bg-green-500" />
                  </div>
                  <img
                    className="size-60"
                    alt={previewLogoAlt}
                    src="/block-media/shadcnblocks/block/block-1.svg"
                  />
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Signup8 };