Pricing Toggle

"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export default function PricingToggle() {
  const [yearly, setYearly] = useState(false);
  return (
    <div className="flex flex-col items-center gap-3">
      <div className="inline-flex rounded-full border bg-muted p-1 text-sm">
        {["Monthly", "Yearly"].map((label) => {
          const active = (label === "Yearly") === yearly;
          return (
            <button
              key={label}
              type="button"
              onClick={() => setYearly(label === "Yearly")}
              className={cn(
                "rounded-full px-4 py-1.5 transition-colors",
                active
                  ? "bg-background text-foreground shadow-sm"
                  : "text-muted-foreground hover:text-foreground",
              )}
            >
              {label}
            </button>
          );
        })}
      </div>
      <p className="text-sm text-muted-foreground">
        {yearly ? "$96 a year, two months free" : "$10 a month"}
      </p>
    </div>
  );
}