"use client";

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

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { cn } from "@/lib/utils";

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

interface Pricing7Props {
  className?: string;
}

const Pricing7 = ({ className }: Pricing7Props) => {
  const [isAnnually, setIsAnnually] = useState(false);
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto mb-20 max-w-3xl text-center">
          <h2 className="mb-4 text-xl font-semibold lg:text-2xll">تعرفه‌ها</h2>
          <p className="text-muted-foreground lg:text-lg">
            طرح مناسب خود را انتخاب کنید و با امکانات متناسب نیازتان شروع
            کنید.
          </p>
        </div>
        <div className="flex flex-col items-center gap-2">
          <span className="text-muted-foreground">دوره صورتحساب</span>
          <div className="inline-flex items-center rounded-md bg-muted p-1">
            <RadioGroup
              defaultValue="monthly"
              className="grid h-auto w-auto grid-cols-2 gap-0"
              onValueChange={(value) => {
                setIsAnnually(value === "annually");
              }}
            >
              <div className='rounded-md transition-all has-[button[data-state="checked"]]:bg-background'>
                <RadioGroupItem
                  value="monthly"
                  id="monthly"
                  className="peer sr-only"
                />
                <Label
                  htmlFor="monthly"
                  className="flex h-11 cursor-pointer items-center justify-center whitespace-nowrap px-6 text-base font-semibold text-muted-foreground peer-data-[state=checked]:text-primary"
                >
                  ماهانه
                </Label>
              </div>
              <div className='rounded-md transition-all has-[button[data-state="checked"]]:bg-background'>
                <RadioGroupItem
                  value="annually"
                  id="annually"
                  className="peer sr-only"
                />
                <Label
                  htmlFor="annually"
                  className="flex h-11 cursor-pointer items-center justify-center gap-2 whitespace-nowrap px-6 text-base font-semibold text-muted-foreground peer-data-[state=checked]:text-primary"
                >
                  <span>سالانه</span>
                  <Badge
                    variant="outline"
                    className="shrink-0 border-green-200 bg-green-100 px-1.5 text-xs text-green-600"
                  >
                    ۲۰٪-
                  </Badge>
                </Label>
              </div>
            </RadioGroup>
          </div>
          <div className="mt-10 grid max-w-3xl gap-6 md:grid-cols-2">
            <div className="rounded-lg border p-6">
              <div className="flex h-full flex-col justify-between gap-5">
                <div>
                  <h3 className="mb-4 text-xl font-semibold">طرح پایه</h3>
                  <span className="text-2xll font-semibold">
                    {formatPrice(isAnnually ? 63 : 79)}
                  </span>
                  <span className="mb-4 block font-semibold">در ماه</span>
                  <p className="text-muted-foreground">
                    مناسب تیم‌های کوچک یا کسب‌وکارهایی که تازه شروع کرده‌اند.
                  </p>
                  <p className="mt-6 mb-3 font-semibold">شامل</p>
                  <ul className="flex flex-col gap-3">
                    <li className="flex gap-2">
                      <Check className="mt-1 size-4 shrink-0" />
                      محدودیت ۵ پروژه
                    </li>
                    <li className="flex gap-2">
                      <Check className="mt-1 size-4 shrink-0" />
                      ۵ گیگابایت فضای ذخیره
                    </li>
                    <li className="flex gap-2">
                      <Check className="mt-1 size-4 shrink-0" />
                      تا ۳ کاربر
                    </li>
                    <li className="flex gap-2">
                      <Check className="mt-1 size-4 shrink-0" />
                      فقط پشتیبانی ایمیل
                    </li>
                    <li className="flex gap-2">
                      <Check className="mt-1 size-4 shrink-0" />
                      بدون ثبت زمان کار
                    </li>
                  </ul>
                </div>
                <Button>آزمایش رایگان را شروع رایگان</Button>
              </div>
            </div>
            <div className="rounded-lg border p-6">
              <div className="flex h-full flex-col justify-between gap-5">
                <div>
                  <h3 className="mb-4 text-xl font-semibold">طرح حرفه‌ای</h3>
                  <span className="text-2xll font-semibold">
                    {formatPrice(isAnnually ? 239 : 299)}
                  </span>
                  <span className="mb-4 block font-semibold">در ماه</span>
                  <p className="text-muted-foreground">
                    مناسب کسب‌وکارهای متوسط تا بزرگ با تمام امکانات موردنیاز.
                  </p>
                  <p className="mt-6 mb-3 font-semibold">
                    همه‌چیز در پایه، به‌علاوه
                  </p>
                  <ul className="flex flex-col gap-3">
                    <li className="flex gap-2">
                      <Check className="mt-1 size-4 shrink-0" />
                      پروژه‌های نامحدود
                    </li>
                    <li className="flex gap-2">
                      <Check className="mt-1 size-4 shrink-0" />
                      ۵۰ گیگابایت فضای ذخیره
                    </li>
                    <li className="flex gap-2">
                      <Check className="mt-1 size-4 shrink-0" />
                      عضو نامحدود فضای کاری
                    </li>
                    <li className="flex gap-2">
                      <Check className="mt-1 size-4 shrink-0" />
                      پشتیبانی اولویت‌دار
                    </li>
                  </ul>
                </div>
                <Button>آزمایش رایگان را شروع رایگان</Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Pricing7 };