ERitors-Scribe-Desktop/components/form/RadioGroup.tsx

import React from "react";

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

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

export default function RadioGroup(
    {
        name,
        value,
        onChange,
        options,
        className = ""
    }: RadioGroupProps) {
    return (
        <div className={`flex flex-wrap gap-3 ${className}`}>
            {options.map((option: RadioOption) => (
                <div key={option.value} className="flex items-center">
                    <input
                        type="radio"
                        id={`${name}-${option.value}`}
                        name={name}
                        value={option.value}
                        checked={value === option.value}
                        onChange={() => onChange(option.value)}
                        className="hidden"
                    />
                    <label
                        htmlFor={`${name}-${option.value}`}
                        className={`px-4 py-2 rounded-lg cursor-pointer transition-colors duration-150 text-sm font-medium border ${
                            value === option.value
                                ? 'bg-secondary text-primary border-primary'
                                : 'bg-secondary text-text-secondary border-secondary hover:text-text-primary'
                        }`}
                    >
                        {option.label}
                    </label>
                </div>
            ))}
        </div>
    );
}