import { useTranslations } from "next-intl";

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

export default function PackagePrice({
  price,
  currency,
  durationType,
}: PackagePriceProps) {
  const t = useTranslations("PlanningSection");
  if (!price) return null;
  const durationTypeLabel = {
    day: t("daily"),
    week: t("weekly"),
    month: t("monthly"),
    year: t("yearly"),
  };
  return (
    <div className="font-bold flex items-center gap-1">
      <span className="text-[40px] text-secondary-main">{price}</span>
      <span className="text-[40px] text-secondary-main">{currency}</span>
      {durationType && (
        <>
          <span className="text-[40px]">/</span>
          <span className="text-[20px]">{durationTypeLabel[durationType]}</span>
        </>
      )}
    </div>
  );
}