"use client";

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

import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
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 Pricing3Props {
  className?: string;
}

const Pricing3 = ({ className }: Pricing3Props) => {
  const [isYearly, setIsYearly] = useState(false);
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center text-center">
          <h2 className="mb-6 text-xl font-bold text-pretty lg:text-2xll">
            تعرفه‌های مقرون‌به‌صرفه
          </h2>
          <p className="text-muted-foreground lg:text-xl">
            طرح‌های تعرفه ما را ببینید و گزینه مناسب خود را انتخاب کنید.
          </p>
          <div className="mt-10 flex items-center gap-3 font-medium">
            <Switch
              onCheckedChange={() => setIsYearly(!isYearly)}
              checked={isYearly}
            />
            صورتحساب سالانه
          </div>
        </div>
        <div className="mt-20 grid gap-10 md:grid-cols-3">
          <div>
            <div className="flex flex-col justify-between gap-10 rounded-lg border p-6">
              <div>
                <p className="mb-2 text-lg font-semibold">طرح پایه</p>
                <p className="mb-4 text-xl font-semibold">
                  {formatPrice(0)}
                </p>
                <p className="text-sm text-muted-foreground">
                  مناسب افرادی که تازه شروع کرده‌اند. نیازی به کارت اعتباری
                  نیست.
                </p>
              </div>
              <Button variant="outline" className="w-full">
                رایگان شروع رایگان
              </Button>
            </div>
            <ul className="mt-8 px-6">
              <li className="flex gap-2">
                <Check className="w-4" />
                <p className="text-sm text-muted-foreground">
                  <span className="me-1 font-semibold text-primary">
                    دسترسی محدود به امکانات:
                  </span>
                  ۳ کاربر، ۱ پروژه، ۱ گیگابایت فضای فایل معاملات
                </p>
              </li>
              <Separator className="my-4" />
              <li className="flex gap-2">
                <Check className="w-4" />
                <p className="text-sm text-muted-foreground">
                  <span className="me-1 font-semibold text-primary">
                    پشتیبانی ایمیلی در ساعات کاری:
                  </span>
                  فقط ایمیل تا ۳۰ روز پس از ثبت‌نام
                </p>
              </li>
            </ul>
          </div>
          <div>
            <div className="flex flex-col justify-between gap-10 rounded-lg border p-6">
              <div>
                <p className="mb-2 text-lg font-semibold">طرح استاندارد</p>
                <p className="mb-4 text-xl font-semibold">
                  {formatPrice(isYearly ? 199 : 20)}
                  <span className="ms-1 text-sm font-normal text-muted-foreground">
                    به ازای هر کاربر
                  </span>
                </p>
                <p className="text-sm text-muted-foreground">
                  مناسب کسب‌وکارهای کوچک در حال رشد. با ۳۰ روز آزمایش رایگان
                  شروع رایگان.
                </p>
              </div>
              <Button className="w-full">رایگان امتحان کنید</Button>
            </div>
            <ul className="mt-8 px-6">
              <li className="flex gap-2">
                <Check className="w-4" />
                <p className="text-sm text-muted-foreground">
                  <span className="me-1 font-semibold text-primary">
                    دسترسی به تمام امکانات استاندارد:
                  </span>
                  ۱۰ کاربر، ۵ پروژه، ۵ گیگابایت فضای ذخیره
                </p>
              </li>
              <Separator className="my-4" />
              <li className="flex gap-2">
                <Check className="w-4" />
                <p className="text-sm text-muted-foreground">
                  <span className="me-1 font-semibold text-primary">
                    پشتیبانی اولویت‌دار:
                  </span>
                  پشتیبانی ایمیل و تلفن تا ۳۰ روز پس از ثبت‌نام
                </p>
              </li>
            </ul>
          </div>
          <div>
            <div className="flex flex-col justify-between gap-10 rounded-lg border p-6">
              <div>
                <p className="mb-2 text-lg font-semibold">طرح پریمیوم</p>
                <p className="mb-4 text-xl font-semibold">سفارشی</p>
                <p className="text-sm text-muted-foreground">
                  مناسب سازمان‌های بزرگ با نیازهای پیشرفته. برای دریافت
                  پیشنهاد سفارشی با ما تماس بگیرید.
                </p>
              </div>
              <Button variant="outline" className="w-full">
                گفتگو با فروش
              </Button>
            </div>
            <ul className="mt-8 px-6">
              <li className="flex gap-2">
                <Check className="w-4" />
                <p className="text-sm text-muted-foreground">
                  <span className="me-1 font-semibold text-primary">
                    پشتیبانی اختصاصی:
                  </span>
                  پشتیبانی ۲۴ ساعته ایمیل و تلفن
                </p>
              </li>
              <Separator className="my-4" />
              <li className="flex gap-2">
                <Check className="w-4" />
                <p className="text-sm text-muted-foreground">
                  <span className="me-1 font-semibold text-primary">
                    یکپارچه‌سازی‌های سفارشی:
                  </span>
                  متناسب با نیازهای سازمان شما
                </p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Pricing3 };