"use client";

import * as React from "react";
import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
import { cn } from "../lib/utils";

/** Radio choices as quiet cards; the dot springs in on selection. */
export function RadioGroup({
  className,
  ...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
  return (
    <RadioGroupPrimitive.Root data-slot="radio-group" className={cn("grid gap-2", className)} {...props} />
  );
}

export function RadioGroupItem({
  className,
  children,
  description,
  ...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Item> & { description?: React.ReactNode }) {
  return (
    <RadioGroupPrimitive.Item
      data-slot="radio-group-item"
      className={cn(
        "group/radio flex w-full items-start gap-3 rounded-xl border border-border/80 px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color] duration-150 hover:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring/50 disabled:opacity-50 data-[state=checked]:border-action/40 data-[state=checked]:bg-action/[0.05]",
        className,
      )}
      {...props}
    >
      <span className="mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border border-border transition-colors duration-150 group-data-[state=checked]/radio:border-action group-data-[state=checked]/radio:bg-action">
        <span
          aria-hidden="true"
          className="size-1.5 scale-0 rounded-full bg-background transition-transform duration-200 ease-[var(--ease-spring)] group-data-[state=checked]/radio:scale-100"
        />
      </span>
      <span className="min-w-0">
        <span className="block font-medium text-foreground">{children}</span>
        {description ? <span className="mt-0.5 block text-xs text-muted-foreground">{description}</span> : null}
      </span>
    </RadioGroupPrimitive.Item>
  );
}