import { Check } from "lucide-react";

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

const formatPrice = (value: string | number) =>
  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;

interface Pricing6Props {
  heading: string;
  description?: string;
  price?: string | number;
  priceSuffix?: string;
  features?: string[][];
  buttonText?: string;
  className?: string;
}

const defaultFeatures = [
  ["نامحدود", "یکپارچه‌سازی‌ها", "پشتیبانی اولویت‌دار"],
  ["هم‌زمانی تیم فروش روی یک قیف", "فضای فایل نامحدود", "بازگشت وجه ۳۰ روزه"],
  ["اعضای نامحدود", "شخصی‌سازی", "عضو نامحدود فضای کاری"],
];

const Pricing6 = ({
  heading = "تعرفه‌ها",
  description = "قیمت‌گذاری ساده با ۷ روز آزمایش رایگان.",
  price = 290000,
  priceSuffix = "در ماه",
  features = defaultFeatures,
  buttonText = "شروع آزمایش رایگان",
  className,
}: Pricing6Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-5xl flex-col items-center gap-6 text-center">
          <h2 className="text-xl font-semibold text-pretty lg:text-2xll">
            {heading}
          </h2>
          <p className="max-w-md text-muted-foreground lg:text-xl">
            {description}
          </p>
          <div className="mx-auto flex w-full flex-col rounded-lg border p-6 sm:w-fit sm:min-w-80">
            <div className="flex items-end justify-center gap-1">
              <span className="text-2xll font-semibold">
                {formatPrice(price)}
              </span>
              <span className="pb-2 text-muted-foreground">{priceSuffix}</span>
            </div>
            <div className="my-6">
              {features.map((featureGroup, idx) => (
                <div key={idx}>
                  <ul className="flex flex-col gap-3">
                    {featureGroup.map((feature, i) => (
                      <li
                        key={i}
                        className="flex items-center justify-between gap-2 text-sm font-medium"
                      >
                        {feature} <Check className="inline size-4 shrink-0" />
                      </li>
                    ))}
                  </ul>
                  {idx < features.length - 1 && <Separator className="my-6" />}
                </div>
              ))}
            </div>
            <Button>{buttonText}</Button>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Pricing6 };