"use client";

import { useTranslations } from "next-intl";
import PricingHeader from "./PricingHeader";
import PricingFeatureList from "./PricingFeatureList";
import PricingBadge from "./PricingBadge";
import { useLocaleDirection } from "@/hooks/useLocale";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { FaChevronLeft, FaChevronRight } from "react-icons/fa";

interface PricingCardProps {
  title: string;
  price: string;
  pricePeriod?: string;
  features: string[];
  variant?: "default" | "featured";
  buttonVariant?: "primary" | "radial-gradient-white";
  checkmarkBg?: string;
  checkmarkColor?: string;
  featured?: boolean;
}

export default function PricingCard({
  title,
  price,
  pricePeriod,
  features,
  variant = "default",
  buttonVariant = "primary",
  checkmarkBg,
  checkmarkColor,
  featured = false,
}: PricingCardProps) {
  const t = useTranslations("pricingPackages");
  const { isRTL } = useLocaleDirection();
  const isFeatured = variant === "featured" || featured;
  const { locale } = useLocaleDirection();
  const cardClasses = isFeatured
    ? "relative [background:var(--color-radial-gradient-2)] lg:scale-110 text-white rounded-[16px] overflow-hidden flex flex-col h-full py-10 [box-shadow:var(--shadow-pricing-card)]"
    : "[background:var(--color-radial-gradient-white)]  rounded-[16px] overflow-hidden flex flex-col h-full py-10 [box-shadow:var(--shadow-pricing-card)]";

  return (
    <div className={cardClasses}>
      {featured && <PricingBadge />}
      <PricingHeader
        title={title}
        price={price}
        pricePeriod={pricePeriod}
        isFeatured={isFeatured}
      />
      <PricingFeatureList
        features={features}
        checkmarkBg={checkmarkBg}
        checkmarkColor={checkmarkColor}
        isFeatured={isFeatured}
      />
      <div className="px-5 pt-2 flex justify-center items-center">
        <Button
          variant={buttonVariant}
          asChild
          className={`w-fit ${isFeatured ? "text-primary-main font-bold" : ""}`}
        >
          <Link
            href={`/${locale}/subscribe`}
            className="flex items-center gap-2"
          >
            {t("getQuote")}
            {isRTL ? (
              <FaChevronLeft className="size-3 text-black" />
            ) : (
              <FaChevronRight className="size-3 text-black" />
            )}
          </Link>
        </Button>
      </div>
    </div>
  );
}