export function SingleChip({
  id,
  label,
  onChange,
  value,
  checked = false,
}: any) {
  return (
    <label className="inline-flex items-center">
      <input
        type="checkbox"
        className="peer appearance-none"
        id={id}
        name={id}
        value={value}
        checked={checked}
        onChange={onChange} // must exist
      />
      <span className="cursor-pointer rounded-full border-1 border-gray-300 bg-white px-6 py-2 text-sm font-medium text-gray-800 duration-400 peer-checked:bg-gray-950 peer-checked:text-white peer-hover:border-gray-500 peer-hover:bg-gray-100 hover:border-gray-600 peer-checked:hover:bg-gray-950">
        {label}
      </span>
    </label>
  );
}

export function RadioChip({ id, label, name, checked, onChange }: any) {
  return (
    <label className="inline-flex items-center gap-0.5 md:gap-1">
      <input
        type="radio"
        className="peer appearance-none"
        id={id}
        name={name}
        checked={checked}
        onChange={onChange}
      />
      <span className="cursor-pointer border-1 border-gray-950/50 px-2 py-2 text-xs font-medium text-gray-950 capitalize duration-400 peer-checked:bg-gray-950 peer-checked:text-white hover:bg-gray-100 peer-checked:hover:bg-gray-950 md:px-2">
        {label}
      </span>
    </label>
  );
}
export function LibraryChip({ id, label, name, checked, onChange }: any) {
  return (
    <label className="inline-flex items-center gap-0.5 md:gap-1">
      <input
        type="radio"
        className="peer appearance-none"
        id={id}
        name={name}
        checked={checked}
        onChange={onChange}
      />
      <span className="cursor-pointer border-1 border-gray-950/50 px-0.5 py-2 text-xs font-medium -tracking-wider text-gray-950 capitalize duration-400 peer-checked:bg-gray-950 peer-checked:text-white hover:bg-gray-100 peer-checked:hover:bg-gray-950 sm:px-2 sm:tracking-wide">
        {label}
      </span>
    </label>
  );
}
export function RadioDualChip({ id, label, name, description }: any) {
  return (
    <label className="inline-flex">
      <input
        type="radio"
        id={id}
        name={name}
        className="peer appearance-none"
      />
      <div className="cursor-pointer border-0 border-gray-300 bg-white p-5 text-sm font-medium text-gray-800 duration-800 peer-checked:bg-teal-800 peer-checked:text-gray-50 peer-hover:border-teal-500 peer-hover:bg-teal-200 peer-checked:hover:bg-teal-800">
        <p className="font-macropolo text-xl leading-none uppercase">{label}</p>
        <p className="mt-4 text-xs font-normal">{description}</p>
      </div>
    </label>
  );
}