import { cn } from '@/lib/cn';
import { forwardRef, type InputHTMLAttributes } from 'react';

type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
    /** Classes for the wrapper (layout slot: `mt-0.5`, `mt-1`, …). */
    wrapperClassName?: string;
};

/**
 * Styled radio — the round sibling of `Checkbox`: same 16px box, border,
 * focus ring, and accent fill, with a dot glyph drawn via a peer overlay.
 * Drop-in for raw `<input type="radio">` (pass `name`/`value`/`checked` as
 * usual).
 */
export const Radio = forwardRef<HTMLInputElement, RadioProps>(
    ({ className, wrapperClassName, ...props }, ref) => (
        // h-fit pins the wrapper to the control's own height so the dot
        // overlay stays centered when a grid/flex parent would stretch it.
        <span className={cn('relative inline-flex h-fit shrink-0', wrapperClassName)}>
            <input
                ref={ref}
                type="radio"
                className={cn(
                    'peer h-4 w-4 cursor-pointer appearance-none rounded-full border border-border bg-card shadow-sm transition-colors',
                    'checked:border-accent checked:bg-accent',
                    'focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/30',
                    'disabled:cursor-not-allowed disabled:bg-muted disabled:checked:border-accent/50 disabled:checked:bg-accent/50',
                    className,
                )}
                {...props}
            />
            <span
                className="animate-glyph-in pointer-events-none absolute inset-0 m-auto hidden h-1.5 w-1.5 rounded-full bg-accent-foreground peer-checked:block"
                aria-hidden="true"
            />
        </span>
    ),
);

Radio.displayName = 'Radio';
