// components/pricing/PricingTable.tsx
"use client";

import { useState } from "react";
import { Plan } from "./types";
import BillingToggle from "./BillingToggle";
import PlanCard from "./PlanCard";

export default function PricingTable({ plans }: { plans: Plan[] }) {
  const [billing, setBilling] = useState<"monthly" | "yearly">("monthly");

  return (
    <div>
      <BillingToggle value={billing} onChange={setBilling} />
      <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
        {plans.map((p) => (
          <PlanCard key={p.id} plan={p} billing={billing} />
        ))}
      </div>
    </div>
  );
}