import { Check } from "lucide-react";

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

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

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

interface Pricing15Props {
  className?: string;
}

const Pricing15 = ({ className }: Pricing15Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col gap-10 md:flex-row">
          <div className="w-auto md:w-1/2 lg:w-2/3">
            <h2 className="mb-4 text-xl font-bold text-balance md:text-2xll">
              یک طرح، دسترسی نامحدود
            </h2>
            <p className="mb-4 text-lg text-muted-foreground">
              با یک طرح ساده به تمام امکانات دسترسی داشته باشید و بدون محدودیت
              روی پروژه‌های خود کار کنید.
            </p>
            <Button variant="default" size="lg">
              خرید اشتراک
            </Button>
          </div>
          <div className="w-auth rounded-md border bg-muted p-11 md:w-1/2 lg:w-1/3">
            <p className="text-2xll font-bold">
              {formatPrice(199000)}
              <span className="text-lg">در ماه</span>
            </p>
            <ul className="space-y-4 pt-5 font-medium">
              {features.map((feature, index) => (
                <li key={index} className="flex">
                  <Check className="me-2" />
                  <span className="text-muted-foreground">{feature}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Pricing15 };