import { getTranslations } from "next-intl/server";
import {
  type PricingTier,
  PricingTiers,
} from "@/components/sections/pricing-tiers";

const planConfigs = [
  {
    key: "plan1",
    id: "tier-essential",
    featured: false,
    highlightCount: 6,
  },
  {
    key: "plan2",
    id: "tier-pro",
    featured: true,
    highlightCount: 11,
  },
  {
    key: "plan3",
    id: "tier-enterprise",
    featured: false,
    highlightCount: 12,
  },
] as const;

export async function WpMaintenancePlans() {
  const t = await getTranslations("wpMaintenancePlans");
  const tCommon = await getTranslations("common");

  const tiers: PricingTier[] = planConfigs.map((config) => ({
    id: config.id,
    name: t(`${config.key}Title`),
    description: t(`${config.key}Description`),
    monthlyPrice: t(`${config.key}Price`),
    monthlyPeriod: t(`${config.key}Period`),
    annualPrice: t(`${config.key}PriceAnnual`),
    annualPeriod: t(`${config.key}PeriodAnnual`),
    ctaLabel: t(`${config.key}CtaLabel`),
    featured: config.featured,
    badge: config.featured ? t(`${config.key}Badge`) : undefined,
    features: Array.from({ length: config.highlightCount }, (_, i) =>
      t(`${config.key}Highlight${i + 1}`)
    ),
  }));

  return (
    <PricingTiers
      bottomCta={{
        text: t("bottomCtaText"),
        ctaLabel: t("bottomCtaLabel"),
      }}
      featuresLabel={tCommon("whatsIncluded")}
      frequency={{
        monthlyLabel: t("frequencyMonthly"),
        annualLabel: t("frequencyAnnual"),
        annualSavingsBadge: t("annualSavingsBadge"),
      }}
      guarantee={t("guarantee")}
      header={{
        titleLine1: t("titleLine1"),
        titleLine2: t("titleLine2"),
        subtitle: t("subtitle"),
      }}
      tiers={tiers}
    />
  );
}