Plan picker

1"use client";2 3import { useId, useState, type HTMLAttributes } from "react";4 5export type PlanOption = {6  id: string;7  name: string;8  description?: string;9  /** Effective monthly price when billed monthly. */10  monthly: number;11  /** Effective monthly price when billed yearly. */12  yearly: number;13  features?: string[];14  badge?: string;15  note?: string;16};17 18export type PlanPickerProps = Omit<19  HTMLAttributes<HTMLFieldSetElement>,20  "children" | "onChange"21> & {22  plans: PlanOption[];23  /** Accessible name for the plan group. */24  label?: string;25  /** Billing interval legend. */26  intervalLabel?: string;27  interval?: "monthly" | "yearly";28  defaultInterval?: "monthly" | "yearly";