import { Checkbox, Field, Label } from '@headlessui/react';

interface SensativeSelectorProps {
  showSensitiveTags: boolean;
  setShowSensitiveTags: (checked: boolean) => void;
}

export const SensativeSelector: React.FC<SensativeSelectorProps> = ({ showSensitiveTags, setShowSensitiveTags }) => {
  return (
    <div>
      <Field className="flex items-center gap-2">
        <Checkbox
          checked={showSensitiveTags}
          onChange={setShowSensitiveTags}
          className="group block size-4 rounded border bg-white data-[checked]:bg-blue-500"
        >
          <svg className="stroke-white opacity-0 group-data-[checked]:opacity-100" viewBox="0 0 14 14" fill="none">
            <path d="M3 8L6 11L11 3.5" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </Checkbox>
        <Label>Show sensitive tags?</Label>
      </Field>
    </div>
  )
}