// Search new icons at https://reactsvgicons.com/

interface IconSVGProps {
  viewbox: string
  size?: string
  className?: string
  props?: React.SVGProps<SVGSVGElement>
  children: React.ReactNode
}

export interface IconProps {
  size?: string
  className?: string
}

function IconSVG({ viewbox, size = '1.5rem', className, props, children }: IconSVGProps) {
  return (
  <svg
    width={size}
    height={size}
    className={`w-[${size}] h-[${size}] ${className}`}
    fill='currentColor'
    viewBox={viewbox}
    {...props}
  >
    {children}
  </svg>);
}

export function EducationIcon(props: IconProps) {
  return (
    <IconSVG viewbox='0 0 20 20' {...props}>
      <path d='M3.33 8L10 12l10-6-10-6L0 6h10v2H3.33zM0 8v8l2-2.22V9.2L0 8zm10 12l-5-3-2-1.2v-6l7 4.2 7-4.2v6L10 20z' />
    </IconSVG>
  );
}

export function InDoorIcon(props: IconProps) {
  return (
    <IconSVG viewbox='0 0 24 24' {...props}>
      <path fill='none' d='M0 0h24v24H0z' />
      <path d='M10 11H4V3a1 1 0 011-1h14a1 1 0 011 1v18a1 1 0 01-1 1H5a1 1 0 01-1-1v-8h6v3l5-4-5-4v3z' />
    </IconSVG>
  );
}

export function CheckboxCheckedIcon() {
  return (
    <svg
      className='w-3 h-3'
      viewBox='0 0 512 512'
      fill='#ffffff'
    >
      <path d='M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7l233.4-233.3c12.5-12.5 32.8-12.5 45.3 0z' />
    </svg>
  );
}

export function CheckboxNullIcon() {
  return (
    <svg
      className='w-3 h-3'
      viewBox='0 0 16 16'
      fill='#ffffff'
    >
      <path d='M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z' />
    </svg>
  );
}