reui-blocks/blocks/pricing41.tsx

"use client";

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

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Switch } from "@/components/ui/switch";
import { cn } from "@/lib/utils";

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

interface Plan {
  id: string;
  name: string;
  monthlyPrice: number;
  yearlyPrice: number;
  description?: string;
  features: string[];
  highlighted?: boolean;
  ctaText?: string;
  ctaHref?: string;
}

interface Pricing41Props {
  heading?: string;
  description?: string;
  plans?: Plan[];
  className?: string;
}

const Pricing41 = ({
  heading = "تعرفه‌ها",
  description = "رایگان با کل تیم خود استفاده کنید. با ارتقای طرح، موارد کاری نامحدود، کنترل‌های امنیتی پیشرفته و امکانات بیشتر را فعال کنید.",
  plans = [
    {
      id: "free",
      name: "رایگان",
      monthlyPrice: 0,
      yearlyPrice: 0,
      description: "رایگان برای همه",
      features: [
        "اعضای نامحدود",
        "۲ تیم",
        "۵۰۰ مورد کاری",
        "یکپارچه‌سازی پیام‌رسان تیمی و مخزن کد",
      ],
      ctaText: "شروع رایگان",
      ctaHref: "#",
    },
    {
      id: "startup",
      name: "استارتاپ",
      monthlyPrice: 80000,
      yearlyPrice: 60000,
      features: [
        "همه امکانات طرح رایگان، به‌علاوه:",
        "دستیار هوش مصنوعی",
        "تیم‌های نامحدود",
        "موارد کاری و آپلود فایل نامحدود",
        "بینش‌های پیشرفته",
        "نقش‌های مدیریتی",
      ],
      highlighted: true,
      ctaText: "شروع رایگان",
      ctaHref: "#",
    },
    {
      id: "enterprise",
      name: "سازمانی",
      monthlyPrice: 240000,
      yearlyPrice: 200000,
      features: [
        "همه امکانات طرح استارتاپ، به‌علاوه:",
        "هوش مصنوعی پیشرفته",
        "ورود یکپارچه (SSO) و احراز هویت سازمانی",
        "پشتیبانی اختصاصی",
        "یکپارچه‌سازی‌های سفارشی",
      ],
      ctaText: "گفتگو با فروش",
      ctaHref: "#",
    },
  ],
  className,
}: Pricing41Props) => {
  const [isAnnual, setIsAnnual] = useState(true);

  return (
    <section className={cn("py-28 lg:py-32", className)}>
      <div className="container max-w-5xl">
        <div className="space-y-4 text-center">
          <h2 className="text-xl tracking-tight md:text-xl lg:text-2xll">
            {heading}
          </h2>
          <p className="mx-auto max-w-xl leading-snug text-balance text-muted-foreground">
            {description}
          </p>
        </div>

        <div className="mt-8 grid items-start gap-5 text-start md:mt-12 md:grid-cols-3 lg:mt-20">
          {plans.map((plan) => (
            <Card
              key={plan.id}
              className={cn(
                plan.highlighted && "origin-top outline-4 outline-primary",
              )}
            >
              <CardContent className="flex flex-col gap-7 px-6 py-5">
                <div className="space-y-2">
                  <h3 className="font-semibold text-foreground">{plan.name}</h3>
                  <div className="space-y-1">
                    <div className="text-lg font-medium text-muted-foreground">
                      {formatPrice(
                        isAnnual ? plan.yearlyPrice : plan.monthlyPrice,
                      )}{" "}
                      {plan.id !== "free" && (
                        <span className="text-muted-foreground">
                          به ازای هر کاربر در{" "}
                          {isAnnual ? "سال" : "ماه"}
                        </span>
                      )}
                    </div>
                  </div>
                </div>

                {plan.id !== "free" ? (
                  <div className="flex items-center gap-2">
                    <span
                      dir="rtl"
                      className="inline-flex shrink-0 items-center"
                    >
                      <Switch
                        checked={isAnnual}
                        onCheckedChange={() => setIsAnnual(!isAnnual)}
                        aria-label="تغییر صورتحساب سالانه"
                      />
                    </span>
                    <span
                      className={cn(
                        "text-sm font-medium transition-colors",
                        isAnnual
                          ? "text-foreground"
                          : "text-muted-foreground",
                      )}
                    >
                      صورتحساب سالانه
                    </span>
                  </div>
                ) : (
                  <span className="text-sm text-muted-foreground">
                    {plan.description}
                  </span>
                )}

                <div className="space-y-3">
                  {plan.features.map((feature) => (
                    <div
                      key={feature}
                      className="flex items-center gap-1.5 text-muted-foreground"
                    >
                      <Check className="size-5 shrink-0" />
                      <span className="text-sm">{feature}</span>
                    </div>
                  ))}
                </div>

                <Button
                  className="w-fit"
                  variant={plan.highlighted ? "default" : "outline"}
                  asChild
                >
                  <a href={plan.ctaHref || "#"}>
                    {plan.ctaText || "شروع رایگان"}
                  </a>
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Pricing41 };