import { Check } from "lucide-react";

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

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

const features = [
  "پشتیبان‌گیری خودکار",
  "پشتیبانی اولویت‌دار",
  "پروژه‌های نامحدود",
  "عضو نامحدود فضای کاری",
  "دامنه سفارشی",
  "برندسازی سفارشی",
  "تحلیل‌های پیشرفته",
  "دسترسی‌های سفارشی",
  "گزارش‌های پیشرفته",
];

interface Pricing8Props {
  className?: string;
}

const Pricing8 = ({ className }: Pricing8Props) => {
  return (
    <section className={cn("bg-muted py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center gap-4 text-center">
          <h2 className="mb-2 text-3xl font-medium lg:text-2xll">تعرفه‌ها</h2>
          <p className="max-w-lg text-muted-foreground">
            قیمت‌گذاری ساده و شفاف با امکانات کامل برای رشد کسب‌وکار شما.
          </p>
        </div>
        <div className="mt-10">
          <Card className="mx-auto flex w-full max-w-sm flex-col justify-between gap-10 rounded-lg p-6 text-center">
            <p className="text-xl">شروع از</p>
            <div>
              <div className="flex items-end justify-center gap-1">
                <span className="text-xl font-medium lg:text-2xll">
                  {formatPrice(160000)}
                </span>
                <span className="pb-1 text-lg text-muted-foreground">
                  در ماه
                </span>
              </div>
              <p className="mt-1 text-sm text-muted-foreground">
                با ۷ روز آزمایش رایگان
              </p>
            </div>
            <Button className="w-full" size="lg">
              رایگان امتحان کنید
            </Button>
          </Card>
          <p className="lg:text-1xl mt-8 text-center text-xl font-medium lg:mt-10">
            چه چیزهایی در طرح گنجانده شده
          </p>
          <ul className="mx-auto mt-4 grid w-fit md:w-auto md:max-w-2xl md:grid-cols-2 md:ps-14 lg:max-w-4xl lg:grid-cols-3">
            {features.map((feature, index) => (
              <li
                key={index}
                className="mt-4 flex items-center gap-2 text-sm font-medium"
              >
                <Check className="size-5" />
                <span className="text-muted-foreground">{feature}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
};

export { Pricing8 };