interface DropdownButtonProps {
  content: string;
  name: string;
  value: string;
  selected: boolean;
  changeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

export default function DropdownButton({ content, name, value, selected, changeHandler }: DropdownButtonProps) {
  return (
    <label className="inline-block cursor-pointer select-none">
      <input onChange={changeHandler} type="checkbox" name={name} value={value} className="sr-only peer" checked={selected} />
      <span className="peer-checked:bg-blue-600 peer-checked:text-white peer-checked:border-blue-600 px-2 py-1 border border-gray-300 rounded-lg">
        {content}
      </span>
    </label>
  );
}