reui-blocks/blocks/pricing4.tsx

"use client";

import { Check } from "lucide-react";
import { useState } from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

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

interface PricingPlan {
  name: string;
  badge: string;
  monthlyPrice: number;
  yearlyPrice: number;
  features: string[];
  buttonText: string;
  isPopular?: boolean;
}

interface Pricing4Props {
  title?: string;
  description?: string;
  plans?: PricingPlan[];
  className?: string;
}

const Pricing4 = ({
  title = "تعرفه‌ها",
  description = "طرح‌های مقرون‌به‌صرفه ما را ببینید.",
  plans = [
    {
      name: "رایگان",
      badge: "رایگان",
      monthlyPrice: 0,
      yearlyPrice: 0,
      features: [
        "یکپارچه‌سازی نامحدود",
        "پشتیبانی از ویندوز، لینوکس و مک",
        "پشتیبانی اولویت‌دار",
        "به‌روزرسانی رایگان",
      ],
      buttonText: "شروع رایگان",
    },
    {
      name: "حرفه‌ای",
      badge: "حرفه‌ای",
      monthlyPrice: 290000,
      yearlyPrice: 249000,
      features: [
        "همه‌چیز در رایگان",
        "پشتیبانی تماس زنده ماهانه",
        "فضای فایل نامحدود",
      ],
      buttonText: "خرید",
    },
    {
      name: "الیت",
      badge: "الیت",
      monthlyPrice: 590000,
      yearlyPrice: 549000,
      features: [
        "همه‌چیز در حرفه‌ای",
        "تحلیل‌های پیشرفته",
        "برندسازی سفارشی",
        "عضو نامحدود فضای کاری",
      ],
      buttonText: "خرید",
      isPopular: true,
    },
  ],
  className,
}: Pricing4Props) => {
  const [isAnnually, setIsAnnually] = useState(false);
  return (
    <section className={cn("py-32", className)}>
      <div className="container mx-auto">
        <div className="flex flex-col gap-6">
          <h2 className="text-xl font-semibold text-pretty lg:text-2xll">
            {title}
          </h2>
          <div className="flex flex-col justify-between gap-10 md:flex-row">
            <p className="max-w-3xl text-muted-foreground lg:text-xl">
              {description}
            </p>
            <Tabs
              value={isAnnually ? "annually" : "monthly"}
              onValueChange={(value: string) =>
                setIsAnnually(value === "annually")
              }
              className="w-fit shrink-0"
              aria-label="دوره صورتحساب"
            >
              <TabsList className="grid h-11 w-max grid-cols-2 gap-0 rounded-md p-1 text-lg">
                <TabsTrigger
                  value="monthly"
                  className="h-full min-h-0 px-7 py-0 font-semibold text-muted-foreground data-active:text-foreground"
                >
                  ماهانه
                </TabsTrigger>
                <TabsTrigger
                  value="annually"
                  className="h-full min-h-0 px-7 py-0 font-semibold text-muted-foreground data-active:text-foreground"
                >
                  سالانه
                </TabsTrigger>
              </TabsList>
            </Tabs>
          </div>
          <div className="flex w-full flex-col items-stretch gap-6 md:flex-row">
            {plans.map((plan) => (
              <div
                key={plan.name}
                className={`flex w-full flex-col rounded-lg border p-6 text-start ${
                  plan.isPopular ? "bg-muted" : ""
                }`}
              >
                <Badge className="mb-8 block w-fit uppercase">
                  {plan.badge}
                </Badge>
                <h3 className="font-mono text-xl lg:text-2xll">
                  {formatPrice(
                    isAnnually ? plan.yearlyPrice : plan.monthlyPrice,
                  )}
                </h3>
                <p
                  className={`text-muted-foreground ${plan.monthlyPrice === 0 ? "invisible" : ""}`}
                >
                  {isAnnually ? "در سال" : "در ماه"}
                </p>
                <Separator className="my-6" />
                <div className="flex h-full flex-col justify-between gap-20">
                  <ul className="space-y-4 text-muted-foreground md:leading-snug">
                    {plan.features.map((feature, featureIndex) => (
                      <li
                        key={featureIndex}
                        className="flex items-center gap-2"
                      >
                        <Check className="size-4 shrink-0" aria-hidden="true" />
                        <span>{feature}</span>
                      </li>
                    ))}
                  </ul>
                  <Button className="w-full">{plan.buttonText}</Button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Pricing4 };