"use client";
import { SaudiRiyal } from "lucide-react";
import { useTranslations } from "next-intl";

interface PackagePriceProps {
  price?: string | null;
  currency?: React.ReactNode | string | null;
  durationType?: "day" | "week" | "month" | "year" | null;
}

export default function PackagePrice({
  price,
  currency,
  durationType,
}: PackagePriceProps) {
  const t = useTranslations("SubscribePage");
  if (!price) return null;
  const durationTypeLabel = {
    day: t("daily"),
    week: t("weekly"),
    month: t("monthly"),
    year: t("yearly"),
  };
  const currencySign =
    currency === "SAR" ? (
      <SaudiRiyal className="text-[40px]" />
    ) : currency === "USD" ? (
      "$"
    ) : (
      currency
    );
  return (
    <div className="font-bold flex items-center gap-1">
      <span className="text-[12px] sm:text-[16px] md:text-[18px]">
        {t("packageValue")} :{" "}
      </span>
      <span className="text-[24px] sm:text-[32px]">{price}</span>
      <span className="text-[24px] sm:text-[32px]">{currencySign}</span>
      {durationType && (
        <>
          <span className="text-[24px] sm:text-[32px]">/</span>
          <span className="text-[16px] sm:text-[20px]">
            {durationTypeLabel[durationType]}
          </span>
        </>
      )}
    </div>
  );
}