import { BadgeCheck, Clock, Handshake, Snowflake, Star } from "lucide-react";

import { CardSpotlight } from "@/components/aceternity/card-spotlight";
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")} ریال`;

interface Pricing37Props {
  className?: string;
}

const Pricing37 = ({ className }: Pricing37Props) => {
  const PremiumPlan = {
    price: 125000,
    features: [
      { icon: Snowflake, label: "همه کامپوننت‌های پریمیوم" },
      { icon: Handshake, label: "دسترسی زودهنگام" },
      { icon: Star, label: "درخواست کامپوننت" },
      { icon: Clock, label: "به‌روزرسانی رایگان مادام‌العمر" },
      { icon: BadgeCheck, label: "پشتیبانی نوافروش" },
    ],
  };

  return (
    <section className={cn("overflow-hidden py-32", className)}>
      <div className="container flex w-full flex-col items-center justify-center px-4">
        <p className="rounded-full bg-muted px-2 py-1 text-xs uppercase">
          تعرفه‌ها
        </p>
        <h2 className="relative py-2 text-center font-sans text-2xll font-semibold tracking-tighter lg:text-2xll">
          جعبه‌ابزار نهایی بلاک‌ها
        </h2>
        <p className="text-md mx-auto max-w-xl px-5 text-center text-muted-foreground lg:text-lg">
          تعادل کامل بین عملکرد و شخصی‌سازی.
        </p>

        <CardSpotlight className="relative mt-14 w-full max-w-md overflow-hidden rounded-3xl text-background">
          <div className="relative z-10 flex h-full flex-col justify-between">
            <div>
              <p className="text-md font-semibold">سوپر پریمیوم</p>
              <h3 className="mt-[11px] text-xl font-semibold tracking-tight">
                {formatPrice(PremiumPlan.price)}
              </h3>
              <ul className="mt-[30px] space-y-[10px]">
                {PremiumPlan.features.map((item, i) => (
                  <li key={i} className="flex items-center gap-2">
                    <item.icon className="size-4 shrink-0" />
                    <p className="text-[15px] font-medium tracking-tight opacity-50">
                      {item.label}
                    </p>
                  </li>
                ))}
              </ul>
            </div>
            <Button
              className="mt-20 w-full rounded-xl font-semibold"
              variant="secondary"
            >
              دسترسی فوری
            </Button>
          </div>
        </CardSpotlight>
      </div>
    </section>
  );
};

export { Pricing37 };