"use client";

import { useState } from "react";
import PlanCard, { type PlanCardData } from "@/components/PlanCard";

export default function PlanGroups({
  miniCombo,
  professional,
}: {
  miniCombo: PlanCardData[];
  professional: PlanCardData[];
}) {
  const [view, setView] = useState<"mini-combo" | "professional">("professional");
  const plans = view === "mini-combo" ? miniCombo : professional;

  return (
    <div>
      <div className="flex justify-center">
        <div className="inline-flex rounded-full bg-slate-100 p-1.5">
          <button
            onClick={() => setView("mini-combo")}
            className={`rounded-full px-6 py-2.5 text-sm font-semibold transition-all ${
              view === "mini-combo"
                ? "bg-white text-brand-600 shadow-sm"
                : "text-slate-500 hover:text-slate-700"
            }`}
          >
            Mini Combo Plan
          </button>
          <button
            onClick={() => setView("professional")}
            className={`rounded-full px-6 py-2.5 text-sm font-semibold transition-all ${
              view === "professional"
                ? "bg-white text-brand-600 shadow-sm"
                : "text-slate-500 hover:text-slate-700"
            }`}
          >
            Professional Plan
          </button>
        </div>
      </div>

      <div className="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
        {plans.map((plan) => (
          <PlanCard key={plan.name} plan={plan} ctaLabel="Get Started" />
        ))}
      </div>
    </div>
  );
}