PricingTable

type Color = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";

interface PricingTableTier {
    /**
     * Identity for this tier — the key each feature's `tiers` record is written against, and the name
     * of its `-cell` slot.
     */
    id: string;

    /**
     * The tier's name — 'Free', 'Pro', 'Enterprise'.
     */
    title?: string;

    /**
     * One line on who the tier is for, under the name.
     */
    description?: string;

    /**
     * A pill beside the name, for 'Most popular'. A bare string uses the table's own `color`.
     */
    badge?: string | PricingPlanBadge;

    /**
     * The headline figure, formatted however you want it ('$29', 'Free', 'Custom').
     */
    price?: string;

    /**
     * The price this tier is currently going for. Setting it strikes `price` out and takes its place.
     */
    discount?: string;

    /**
     * What the price buys, printed right after it — '/month', '/seat'.
     */
    billingCycle?: string;

    /**
     * When the money actually moves, under the price — 'billed annually'.
     */
    billingPeriod?: string;

    /**
     * Marks this as the recommended tier: its whole column is tinted in the table's `color`.
     * @defaultValue false
     */
    highlight?: boolean;

    /**
     * The call to action in this tier's header cell.
     */
    button?: PricingPlanButton;
}

interface PricingTableFeature {
    /**
     * The feature's name, in the row header.
     */
    title: string;

    /**
     * An explanation, revealed from an `Info` icon beside the name — for a feature whose name isn't
     * self-explanatory ('Audit log retention', 'Concurrent builds').
     */
    description?: string;

    /**
     * What each tier gets, keyed by tier `id`. `true` renders a checkmark, `false` (or a missing key)
     * renders a rule, and a string or number renders as text — which is how one row says '3 seats'
     * for one tier and 'Unlimited' for the next.
     */
    tiers: Record<string, boolean | string | number>;
}

interface PricingTableSection {
    /**
     * The group's heading, above its features — 'Collaboration', 'Security'.
     */
    title: string;

    /**
     * The features in this group, in the order they should be read.
     */
    features: PricingTableFeature[];
}

interface CheckListItem {
    /**
     * Text label for this item.
     */
    label: string;

    /**
     * Secondary text shown below the label.
     */
    description?: string;

    /**
     * Identity used for `v-model` when the list is interactive. Falls back to the item's index.
     */
    value?: string | number;

    /**
     * Whether this item is checked. Used directly when the list isn't interactive; only used as the
     * initial state when interactive and uncontrolled.
     * @defaultValue true
     */
    checked?: boolean;

    /**
     * Disables interaction with this item. Has no effect on a non-interactive list.
     * @defaultValue false
     */
    disabled?: boolean;
}

interface PricingPlanBadge {
    /**
     * The pill's text — 'Most popular', 'Save 20%'.
     */
    label: string;

    /**
     * Defaults to the plan's own `color`.
     */
    color?: Color;

    /**
     * @defaultValue 'soft'
     */
    variant?: "solid" | "soft";
}

interface PricingPlanButton {
    /**
     * The button's text — 'Get started', 'Contact sales'.
     */
    label: string;

    /**
     * Route or URL to navigate to. Leave it off and handle `select` instead when signing up needs
     * to run something first (open a checkout, create a subscription).
     */
    to?: string;

    /**
     * The target attribute for the link (e.g. '_blank').
     */
    target?: string;

    /**
     * Name of the icon displayed inside the button.
     */
    icon?: string;

    /**
     * Defaults to the plan's own `color` on a highlighted plan and `neutral` on the rest — so the
     * recommended plan owns the only coloured call to action in the row.
     */
    color?: Color;

    /**
     * Defaults to `solid` on a highlighted plan and `subtle` on the rest — which is what makes the
     * recommended plan's call to action the loudest one in a row. A `disabled` button stays
     * `subtle` either way: `Button` dims a disabled control to 50%, and half a solid fill reads as
     * broken rather than as "you are already on this plan".
     */
    variant?: "solid" | "subtle" | "soft" | "ghost";

    /**
     * @defaultValue 'md'
     */
    size?: "sm" | "md" | "lg";

    /**
     * Disables the button — for the plan the viewer is already on.
     * @defaultValue false
     */
    disabled?: boolean;
}