import {
  CalendarSync,
  Globe,
  MessageCircle,
  MessagesSquare,
  PlusCircle,
  Sparkles,
} from "lucide-react";

import { Badge } from "@/components/ui/badge";
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 ADDONS = [
  {
    icon: CalendarSync,
    name: "شارژ خودکار اعتبار",
    description:
      "آستانه را تعیین کنید تا اعتبار شما خودکار شارژ شود  بدون انقضا و بدون وقفه!",
    price: {
      unit: "مجموع به ازای هر ۱۰۰۰ اعتبار پیام",
      amount: 140000,
    },
    link: "#",
  },
  {
    icon: MessageCircle,
    name: "اعتبار پیام اضافه",
    description: "۱۲ دلار به ازای هر ۱۰۰۰ اعتبار در ماه",
    price: {
      unit: "مجموع در ماه",
      amount: 120000,
    },
    link: "#",
  },
  {
    icon: MessagesSquare,
    name: "عامل‌های اضافه",
    description: "۷ دلار به ازای هر عامل هوش مصنوعی در ماه",
    price: {
      unit: "مجموع در ماه",
      amount: 70000,
    },
    link: "#",
  },
  {
    icon: Globe,
    name: "دامنه‌های شخصی‌سازی‌شده",
    description:
      "از دامنه‌های سفارشی برای اسکریپت embed، پنجره نمایش و لینک قابل اشتراک عامل هوش مصنوعی استفاده کنید  کاملاً با برند شما!",
    price: {
      unit: "مجموع در ماه",
      amount: 590000,
    },
    link: "#",
  },
  {
    icon: Sparkles,
    name: "حذف واترمارک",
    description: "حذف برندسازی از پنجره نمایش و ویجت",
    price: {
      unit: "مجموع در ماه",
      amount: 390000,
    },
    link: "#",
  },
];

interface Pricing33Props {
  className?: string;
}

const Pricing33 = ({ className }: Pricing33Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="flex w-full flex-col items-center gap-4">
          <Badge className="flex items-center gap-2 rounded-full border border-muted bg-background px-4 py-1.5">
            <PlusCircle className="size-2 text-primary" />
            <p className="text-sm leading-5 font-medium text-foreground">
              افزونه‌ها
            </p>
          </Badge>
          <h2 className="max-w-full text-center text-3xl font-semibold md:max-w-[42.5rem] md:text-2xll">
            طرح خود را با افزونه‌های قدرتمند تقویت کنید!
          </h2>
          <div className="flex w-full flex-col items-center gap-4 pt-10">
            {ADDONS.map((addon, i) => (
              <div
                className="grid w-full rounded-2xl border border-muted shadow-xs xl:grid-cols-[minmax(36.25rem,48.125rem)_1fr]"
                key={`addon-${i}`}
              >
                <div className="flex w-full flex-col gap-4 p-6 md:flex-row">
                  <div className="relative flex size-12 after:absolute after:start-1/2 after:top-1/2 after:z-10 after:block after:size-full after:-translate-1/2 after:rounded-full after:content-['']">
                    <div className="relative z-20 m-auto flex size-11.5 shrink-0 rounded-full bg-foreground">
                      <addon.icon className="m-auto size-5 stroke-background" />
                    </div>
                  </div>
                  <div className="flex flex-col gap-1">
                    <h3 className="text-xl font-medium">{addon.name}</h3>
                    <p className="text-base text-muted-foreground">
                      {addon.description}
                    </p>
                  </div>
                </div>
                <div className="flex w-full flex-col items-center gap-2 p-6 md:flex-row">
                  <div className="flex w-full flex-wrap items-center gap-4 md:flex-nowrap">
                    <div className="text-lg font-semibold">
                      {formatPrice(addon.price.amount)}
                    </div>
                    <div className="text-xs text-foreground/60">
                      {addon.price.unit}
                    </div>
                  </div>
                  <Button
                    variant="outline"
                    className="block h-12 w-full px-4 md:max-w-[10.625rem]"
                  >
                    <a href={addon.link}>دریافت افزونه</a>
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Pricing33 };