reui-blocks/blocks/pricing34.tsx

"use client";

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

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { cn } from "@/lib/utils";

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

const PRICING_PLANS = [
  {
    name: "طرح پایه",
    monthlyPrice: 0,
    yearlyPrice: 0,
    isCustom: false,
    period: {
      monthly: "در ماه / کاربر",
      yearly: "در سال / کاربر",
    },
    description: {
      monthly:
        "مناسب افرادی که تازه شروع کرده‌اند. نیازی به کارت اعتباری نیست.",
      yearly:
        "مناسب افرادی که تازه شروع کرده‌اند. نیازی به کارت اعتباری نیست.",
    },
    buttonText: "رایگان شروع رایگان",
    highlighted: false,
    features: [
      "امکانات با دسترسی محدود",
      "پشتیبانی ایمیلی در ساعات کاری",
      "وبلاگ هفتگی",
      "۱۰۰ گیگابایت فضای ذخیره",
      "پشتیبانی از همه فریم‌ورک‌ها",
    ],
  },
  {
    name: "طرح استاندارد",
    monthlyPrice: 200000,
    yearlyPrice: 200000,
    isCustom: false,
    period: {
      monthly: "در ماه / کاربر",
      yearly: "در سال / کاربر",
    },
    description: {
      monthly:
        "مناسب کسب‌وکارهای کوچک در حال رشد. با ۳۰ روز آزمایش رایگان شروع رایگان.",
      yearly:
        "مناسب کسب‌وکارهای کوچک در حال رشد. ۱۶٪ کمتر نسبت به پرداخت ماهانه.",
    },
    buttonText: "شروع رایگان",
    highlighted: true,
    features: [
      "امکانات با دسترسی محدود",
      "پشتیبانی ایمیلی در ساعات کاری",
      "وبلاگ هفتگی",
      "۱۰۰ گیگابایت فضای ذخیره",
      "پشتیبانی از همه فریم‌ورک‌ها",
    ],
  },
  {
    name: "طرح پریمیوم",
    monthlyPrice: null,
    yearlyPrice: null,
    isCustom: true,
    period: {
      monthly: "در ماه / کاربر",
      yearly: "در سال / کاربر",
    },
    description: {
      monthly:
        "مناسب سازمان‌های بزرگ با نیازهای پیشرفته. برای دریافت پیشنهاد سفارشی با ما تماس بگیرید.",
      yearly:
        "مناسب سازمان‌های بزرگ با نیازهای پیشرفته. برای دریافت پیشنهاد سفارشی با ما تماس بگیرید.",
    },
    buttonText: "شروع رایگان",
    highlighted: false,
    features: [
      "امکانات با دسترسی محدود",
      "پشتیبانی ایمیلی در ساعات کاری",
      "وبلاگ هفتگی",
      "۱۰۰ گیگابایت فضای ذخیره",
      "پشتیبانی از همه فریم‌ورک‌ها",
    ],
  },
];

interface Pricing34Props {
  className?: string;
}

const formatPlanPrice = (
  price: number | null,
  isCustom: boolean,
) => {
  if (isCustom) {
    return "سفارشی";
  }
  return formatPrice(price ?? 0);
};

const Pricing34 = ({ className }: Pricing34Props) => {
  const [billingCycle, setBillingCycle] = useState("monthly");

  return (
    <section className={cn("bg-background py-32", className)}>
      <div className="container flex flex-col gap-13">
        <h1 className="text-center text-2xll font-bold tracking-tighter text-foreground">
          طرح‌های تعرفه ساده
        </h1>

        <div className="flex justify-center">
          <ToggleGroup
            type="single"
            value={billingCycle}
            onValueChange={(value) => {
              if (value && value !== billingCycle) {
                setBillingCycle(value);
              }
            }}
            className="rounded-lg bg-muted p-1"
          >
            <ToggleGroupItem
              value="monthly"
              className="h-8 w-32 rounded-md data-[state=on]:bg-background"
            >
              ماهانه
            </ToggleGroupItem>
            <ToggleGroupItem
              value="yearly"
              className="h-8 w-32 rounded-md data-[state=on]:bg-background"
            >
              سالانه
            </ToggleGroupItem>
          </ToggleGroup>
        </div>

        <div className="flex flex-wrap justify-center gap-7">
          {PRICING_PLANS.map((plan, index) => (
            <Card
              key={index}
              className={`max-w-sm rounded-3xl border ${
                plan.highlighted ? "border-2 border-primary" : "border-border"
              } shadow-sm`}
            >
              <CardHeader>
                <CardTitle className="text-lg font-medium text-foreground">
                  {plan.name}
                </CardTitle>
                <div className="mt-4">
                  <div className="text-2xll font-semibold tracking-tight text-muted-foreground">
                    {formatPlanPrice(
                      billingCycle === "monthly"
                        ? plan.monthlyPrice
                        : plan.yearlyPrice,
                      plan.isCustom,
                    )}
                  </div>
                  <div className="text-xs text-muted-foreground">
                    {billingCycle === "monthly"
                      ? plan.period.monthly
                      : plan.period.yearly}
                  </div>
                </div>
              </CardHeader>

              <CardContent className="px-7 pt-6">
                <p className="text-sm text-muted-foreground">
                  {billingCycle === "monthly"
                    ? plan.description.monthly
                    : plan.description.yearly}
                </p>

                <Button className="mt-6 w-full">{plan.buttonText}</Button>

                <div className="relative mt-12 mb-4 flex items-center justify-center overflow-hidden">
                  <Separator />
                  <span className="px-3 text-xs text-muted-foreground opacity-50">
                    امکانات
                  </span>
                  <Separator />
                </div>

                <ul className="mt-6 space-y-4">
                  {plan.features.map((feature, idx) => (
                    <li key={idx} className="flex items-center">
                      <BadgeCheck className="size-5 text-muted-foreground" />
                      <span className="ms-3 text-sm text-muted-foreground">
                        {feature}
                      </span>
                    </li>
                  ))}
                </ul>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Pricing34 };