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

import clsx from "clsx";

type Billing = "monthly" | "yearly";

export default function BillingToggle({
  value,
  onChange,
}: {
  value: Billing;
  onChange: (v: Billing) => void;
}) {
  return (
    <div className="mx-auto mb-8 flex w-fit items-center gap-2 rounded-full border border-gray-200 p-1">
      <button
        onClick={() => onChange("monthly")}
        className={clsx(
          "rounded-full px-4 py-2 text-sm transition",
          value === "monthly" ? "bg-gray-900 text-white" : "text-gray-600 hover:bg-gray-100"
        )}
        aria-pressed={value === "monthly"}
      >
        Monthly
      </button>
      <button
        onClick={() => onChange("yearly")}
        className={clsx(
          "rounded-full px-4 py-2 text-sm transition",
          value === "yearly" ? "bg-gray-900 text-white" : "text-gray-600 hover:bg-gray-100"
        )}
        aria-pressed={value === "yearly"}
      >
        Yearly <span className="ml-1 rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-700">Save 10%</span>
      </button>
    </div>
  );
}