import React from "react";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import { IoSparklesOutline } from "react-icons/io5";
import PackagePrice from "./PackagePrice";
import FeaturesList from "./FeaturesList";
import { cn } from "@/lib/utils";
import Link from "next/link";
import { SaudiRiyal } from "lucide-react";
import { useLocale } from "next-intl";
import { PackageProperty } from "@/types/package";

interface PackageCardProps {
  name: string;
  price?: string | null;
  currency: React.ReactNode | string;
  durationType?: "day" | "week" | "month" | "year" | null;
  features: PackageProperty[];
  subscribeText: string;
  uuid: string;
  billingCycle: "month" | "year";
  otherCycleHasFeatures?: boolean;
  isPopular?: boolean;
  popularText?: string;
}

export default function PackageCard({
  name,
  price,
  currency,
  durationType,
  features,
  subscribeText,
  uuid,
  billingCycle,
  otherCycleHasFeatures = false,
  isPopular = false,
  popularText,
}: PackageCardProps) {
  const locale = useLocale();
  const isRTL = locale === "ar";
  const currencySign =
    currency === "SAR" ? (
      <SaudiRiyal className="text-[40px] text-secondary-main" />
    ) : currency === "USD" ? (
      "$"
    ) : (
      currency
    );

  return (
    <Card
      className={cn(
        "md:max-w-[600px] w-full h-full lg:max-w-none flex flex-col justify-between gap-10 relative",
      )}
      dir={isRTL ? "rtl" : "ltr"}
    >
      {isPopular && popularText && (
        <h3 className="absolute -top-8 left-1/2 -translate-x-1/2 w-[105px] h-[50px] rounded-full flex items-center justify-center text-primary-main bg-secondary-lighter text-[16px] font-bold">
          {popularText}
        </h3>
      )}

      <CardContent className="p-0 flex flex-col gap-6">
        <h2 className="text-secondary-main text-[24px] font-bold">{name}</h2>
        <PackagePrice
          price={price}
          currency={currencySign}
          durationType={durationType}
        />
        <FeaturesList
          features={features}
          billingCycle={billingCycle}
          otherCycleHasFeatures={otherCycleHasFeatures}
        />
      </CardContent>

      <CardFooter className="p-0 flex justify-center">
        <Button variant="default" className="w-fit" asChild>
          <Link href={`/subscribe?package_id=${uuid}&duration=${billingCycle}`}>
            <span>{subscribeText}</span>
            <span>
              <IoSparklesOutline className="size-[20px]" />
            </span>
          </Link>
        </Button>
      </CardFooter>
    </Card>
  );
}