import Image from "next/image";

interface Option {
  label: string;
  image: string;
  value: string;
}

interface Props {
  options: Option[];
  path: string;
  onChange: (path: string, value: string) => void;
}

const RadioGroup: React.FC<Props> = ({ options, path, onChange }) => {
  return (
    <div className="flex w-full flex-wrap gap-5 overflow-x-hidden overflow-y-auto p-1">
      {options.map((opt) => (
        <label key={opt.value} className="relative cursor-pointer">
          <input
            type="radio"
            name={path}
            value={opt.value}
            className="peer hidden"
            onChange={() => onChange(path, opt.value)}
          />
          <div className="overflow-hidden border-1 border-dashed border-gray-950/80 text-gray-950 transition-all peer-checked:border-solid peer-checked:border-amber-600 peer-checked:bg-white peer-checked:text-amber-600 peer-checked:outline-2 peer-checked:outline-amber-600">
            <div className="flex h-25 w-25 md:h-40 md:w-40 flex-col">
              <Image
                src={opt.image}
                alt=""
                width={200}
                height={200}
                className="img-responsive"
              />
            </div>
            <div className="flex h-15 w-full items-center whitespace-pre-wrap break-all justify-center p-1 text-xs font-medium">
              {opt.label}
            </div>
          </div>
        </label>
      ))}
    </div>
  );
};

export default RadioGroup;