import { cn } from '@/lib/utils';
import { Check } from 'lucide-react';

type Option = {
  value: string;
  label: string;
  hint?: string;
};

type Props = {
  name: string;
  options: readonly Option[];
  value: string | undefined;
  onChange: (value: string) => void;
  /** Tailwind grid columns class for desktop. Default: grid-cols-2 lg:grid-cols-3 */
  columns?: string;
  ariaLabel?: string;
};

export const RadioCards = ({
  name,
  options,
  value,
  onChange,
  columns = 'grid-cols-2 lg:grid-cols-3',
  ariaLabel,
}: Props) => {
  return (
    <div role="radiogroup" aria-label={ariaLabel} className={cn('grid gap-3', columns)}>
      {options.map((opt) => {
        const checked = value === opt.value;
        return (
          <label
            key={opt.value}
            className={cn(
              'relative flex flex-col items-start gap-1 rounded-xl border-2 px-4 py-3.5 cursor-pointer transition-all',
              'hover:border-primary/40 hover:bg-primary/5',
              checked
                ? 'border-primary bg-primary/5 shadow-sm'
                : 'border-foreground/10 bg-white',
            )}
          >
            <input
              type="radio"
              name={name}
              value={opt.value}
              checked={checked}
              onChange={() => onChange(opt.value)}
              className="sr-only"
            />
            <span className="font-body font-semibold text-foreground text-[15px] leading-tight pr-8 break-words">
              {opt.label}
            </span>
            {opt.hint && (
              <span className="text-foreground/50 text-xs font-body leading-snug">{opt.hint}</span>
            )}
            <span
              className={cn(
                'absolute top-3 right-3 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all',
                checked ? 'border-primary bg-primary' : 'border-foreground/20 bg-transparent',
              )}
              aria-hidden
            >
              {checked && <Check className="w-3 h-3 text-white" strokeWidth={3} />}
            </span>
          </label>
        );
      })}
    </div>
  );
};