import { usePlans } from "@/features/billing/hooks/usePlans";
import { PlanCard } from "@/features/billing/components/PlanCard";

export function PricingSection({ locale }: { locale: string }) {
  const { data: plans, isLoading, isError } = usePlans();

  if (isLoading) {
    return <p>Loading plans…</p>;
  }

  if (isError || !plans) {
    return <p>Unable to load plans. Please try again later.</p>;
  }

  return (
    <section style={{ display: "grid", gap: 24 }}>
      <header style={{ textAlign: "center" }}>
        <h1>Pricing</h1>
        <p>Flexible plans to scale AI media production.</p>
      </header>
      <div style={{ display: "grid", gap: 16, gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))" }}>
        {plans.map((plan) => (
          <PlanCard key={plan.id} plan={plan} locale={locale} />
        ))}
      </div>
    </section>
  );
}
