// components/RadioGroup.tsx
"use client";

import React, { useState } from "react";

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

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

export const RadioGroup: React.FC<RadioGroupProps> = ({
  name,
  options,
  onChange,
  className = "",
}) => {
  const [selected, setSelected] = useState<string>("");

  const handleChange = (value: string) => {
    setSelected(value);
    onChange?.(value);
  };

  return (
    <div className={`flex flex-wrap gap-2 ${className}`}>
      {options.map((option) => (
        <label
          key={option.value}
          className={`cursor-pointer rounded-full px-4 py-2 border text-sm font-medium
            ${
              selected === option.value
                ? "bg-blue-600 text-white border-blue-600"
                : "bg-white text-gray-700 border-gray-300 hover:bg-gray-100"
            }`}
        >
          <input
            type="radio"
            name={name}
            value={option.value}
            checked={selected === option.value}
            onChange={() => handleChange(option.value)}
            className="hidden"
          />
          {option.label}
        </label>
      ))}
    </div>
  );
};