import * as React from "react";
import { cn } from "@/lib/utils";

export interface RadioOption {
  value: string;
  label: string;
}

interface RadioGroupProps {
  name: string;
  options: RadioOption[];
  value?: string;
  onChange: (value: string) => void;
  disabled?: boolean;
  error?: boolean;
  className?: string;
}

export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
  ({ name, options, value, onChange, disabled, error, className }, ref) => (
    <div ref={ref} className={cn("flex flex-wrap gap-4", className)}>
      {options.map((option) => (
        <label
          key={option.value}
          className={cn(
            "inline-flex items-center gap-2 cursor-pointer",
            "text-sm text-(--color-ink)",
            disabled && "opacity-50 cursor-not-allowed"
          )}
        >
          <input
            type="radio"
            name={name}
            value={option.value}
            checked={value === option.value}
            onChange={(e) => onChange(e.target.value)}
            disabled={disabled}
            className={cn(
              "h-4 w-4 rounded-full border appearance-none",
              "transition-all duration-150",
              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-2 focus-visible:ring-offset-(--color-bg)",
              error
                ? "border-(--color-danger) checked:bg-(--color-danger)"
                : "border-(--color-border) checked:bg-(--color-accent)",
              "checked:border-transparent"
            )}
          />
          {option.label}
        </label>
      ))}
    </div>
  )
);
RadioGroup.displayName = "RadioGroup";