Plan toggle

import {
  Badge,
  Button,
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@cronus-ui/ui";
import { Check } from "lucide-react";

export function PricingToggleBlock() {
  const tiers = [
    {
      name: "Launch",
      price: "$19",
      description: "For focused teams shipping one product.",
      features: ["Unlimited blocks", "Theme presets", "Email support"],
    },
    {
      name: "Scale",
      price: "$59",
      description: "For teams running multiple surfaces.",
      features: ["Everything in Launch", "Private registry", "Priority support"],
    },
  ] as const;

  return (
    <section className="px-6 py-20">
      <div className="mx-auto max-w-2xl text-center">
        <Badge variant="secondary">Plans</Badge>
        <h2 className="mt-4 font-display text-4xl font-semibold tracking-tight text-fg">
          Pick the pace that matches your team.
        </h2>
        <div className="mx-auto mt-6 inline-flex rounded-full border border-border bg-surface-inset p-1">
          <Button variant="secondary" size="sm" className="rounded-full">
            Monthly
          </Button>
          <Button variant="ghost" size="sm" className="rounded-full">
            Annual - save 20%
          </Button>
        </div>
      </div>

      <div className="mx-auto mt-12 grid max-w-4xl grid-cols-[repeat(auto-fit,minmax(min(100%,18rem),1fr))] gap-6">
        {tiers.map((tier, index) => (
          <Card
            key={tier.name}
            className={index === 1 ? "border-primary shadow-glow" : "border-border"}
          >
            <CardHeader>
              <CardTitle>{tier.name}</CardTitle>
              <CardDescription>{tier.description}</CardDescription>
              <div className="mt-2 flex items-baseline gap-1">
                <span className="font-display text-4xl font-semibold text-fg">{tier.price}</span>
                <span className="text-sm text-fg-tertiary">/ month</span>
              </div>
            </CardHeader>
            <CardContent>
              <ul className="flex flex-col gap-3">
                {tier.features.map((feature) => (
                  <li key={feature} className="flex items-center gap-2 text-sm text-fg-secondary">
                    <Check className="size-4 text-primary" aria-hidden="true" />
                    {feature}
                  </li>
                ))}
              </ul>
            </CardContent>
            <CardFooter>
              <Button variant={index === 1 ? "primary" : "outline"} className="w-full">
                Choose {tier.name}
              </Button>
            </CardFooter>
          </Card>
        ))}
      </div>
    </section>
  );
}