import PackageCard from "./PackageCard";
import { PricingPlan } from "./packagesConfig";
import { useTranslations } from "next-intl";
import { pricingPlansConfig } from "./packagesConfig";

export default function PackagesList() {
  const t = useTranslations("packages");
  const translators = {
    basic: useTranslations("packages.packages.basic"),
    standard: useTranslations("packages.packages.standard"),
    enterprise: useTranslations("packages.packages.enterprise"),
  };

  const plans: PricingPlan[] = pricingPlansConfig.map((plan) => {
    const tPlan =
      translators[plan.translationNamespace as keyof typeof translators];

    if (!tPlan) {
      throw new Error(
        `No translator found for namespace: ${plan.translationNamespace}`
      );
    }

    return {
      name: tPlan("title"),
      price: plan.price,
      isPopular: plan.isPopular,
      features: t.raw(
        `packages.${plan.translationNamespace}.features`
      ) as string[],
    };
  });

  return (
    <div className="flex flex-wrap flex-col xl:flex-row justify-center items-center gap-5 md:gap-10 w-full">
      {plans.map((plan, index) => (
        <PackageCard key={index} plan={plan} />
      ))}
    </div>
  );
}