import { ArrowRight, Check } from "lucide-react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Cta4Props {
  title?: string;
  description?: string;
  buttonText?: string;
  buttonUrl?: string;
  items?: string[];
  className?: string;
}

const defaultItems = [
  "یکپارچه‌سازی سریع با سرویس‌ها",
  "پشتیبانی تخصصی",
  "شخصی‌سازی کامل رابط کاربری",
  "آماده رشد کسب‌وکار",
  "صدها کامپوننت آماده",
];

const Cta4 = ({
  title = "همین امروز شروع کنید",
  description = "با استفاده از ابزارها و قابلیت‌های آماده، زمان توسعه را کاهش دهید، کیفیت محصول را افزایش دهید و سریع‌تر به بازار برسید.",
  buttonText = "شروع رایگان",
  buttonUrl = "https://ShadcnBlocks",
  items = defaultItems,
  className,
}: Cta4Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container mx-auto">
        <div className="flex justify-center">
          <div className="max-w-5xl">
            <div className="flex flex-col items-start justify-between gap-8 rounded-lg bg-muted px-6 py-10 md:flex-row lg:px-20 lg:py-16">
              <div className="text-start md:w-1/2">
                <h4 className="mb-1 text-xl font-bold md:text-3xl">{title}</h4>
                <p className="text-muted-foreground">{description}</p>
                <Button className="mt-6" asChild>
                  <a href={buttonUrl} target="_blank">
                    {buttonText}
                    <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
                  </a>
                </Button>
              </div>
              <div className="md:w-1/3">
                <ul className="flex flex-col space-y-2 text-sm font-medium">
                  {items.map((item, idx) => (
                    <li className="flex items-center" key={idx}>
                      <Check className="me-4 size-4 shrink-0" />
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Cta4 };