Radio Cards

"use client";

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

export interface RadioCardsOption {
  value: string;
  title: string;
  description: string;
  emoji: string;
  tone: "peach" | "mint" | "lavender" | "butter";
}

export interface RadioCardsProps {
  legend?: string;
  options?: RadioCardsOption[];
  value?: string;
  defaultValue?: string;
  onValueChange?: (v: string) => void;
  className?: string;
}

const TONES = {
  peach: "bg-da-accent text-da-accent-fg",
  mint: "bg-da-secondary text-da-secondary-fg",
  lavender: "bg-da-primary/12 text-da-fg",
  butter: "bg-da-warning/25 text-da-fg",
} as const;

/** Native radio group rendered as big pastel cards (emoji, title, text); the chosen card lifts with a periwinkle ring and a filled radio dot. */
export function RadioCards({
  legend = "How will you use Planta?",
  options = [
    { value: "team", title: "With my team", description: "Shared boards and weekly plans.", emoji: "👥", tone: "lavender" },
    { value: "clients", title: "With clients", description: "Guest boards and approvals.", emoji: "🤝", tone: "peach" },
    { value: "solo", title: "Just me", description: "A calm personal planner.", emoji: "🧘", tone: "mint" },
  ],
  value,
  defaultValue = "team",
  onValueChange,
  className,
}: RadioCardsProps) {
  const name = useId();
  const [inner, setInner] = useState(defaultValue);
  const selected = value ?? inner;
  return (
    <fieldset className={cn("grid gap-3", className)}>
      <legend className="mb-3 font-da-display text-xl font-extrabold">{legend}</legend>
      <div className="grid gap-3 sm:grid-cols-3">
        {options.map((o) => {
          const on = o.value === selected;
          return (
            <label
              key={o.value}
              className={cn(
                "relative flex cursor-pointer flex-col rounded-da-lg p-5 transition-[translate,box-shadow] duration-(--da-duration) ease-da-emphasized has-focus-visible:ring-(length:--da-ring-width) has-focus-visible:ring-da-ring",
                TONES[o.tone],
                on ? "-translate-y-1 shadow-da-md ring-3 ring-da-primary" : "hover:-translate-y-0.5",
              )}
            >
              <input
                type="radio"
                name={name}
                value={o.value}
                checked={on}
                onChange={() => {
                  setInner(o.value);
                  onValueChange?.(o.value);
                }}
                className="sr-only"
              />
              <span
                aria-hidden
                className={cn(
                  "absolute top-4 right-4 grid size-5 place-items-center rounded-full border-2",
                  on ? "border-da-primary bg-da-surface" : "border-current/30",
                )}
              >
                {on && <span className="size-2.5 rounded-full bg-da-primary" />}
              </span>
              <span aria-hidden className="text-3xl">
                {o.emoji}
              </span>
              <span className="mt-3 font-da-display text-lg font-extrabold">{o.title}</span>
              <span className="mt-0.5 text-sm opacity-85">{o.description}</span>
            </label>
          );
        })}
      </div>
    </fieldset>
  );
}

export default RadioCards;