"use client"

import { cn } from '@/lib/utils';
import * as CheckBox from '@radix-ui/react-checkbox';
import { CheckIcon } from 'lucide-react';

const Checkbox = (props: {
  children: React.ReactNode,
  checked?: boolean,
  onChange?: (checked: CheckBox.CheckedState) => void,
}) => {
  // good enough i guess
  const checkId = `${Date.now()}${Math.random()}`;

  return (
    <div className={cn('flex', 'items-center', 'm-1')}>
      <CheckBox.Root
        checked={props.checked}
        onCheckedChange={props.onChange}
        id={checkId}
        className={cn(
          'flex',
          'rounded-md',
          'border-gray-300',
          'border',
          'w-6',
          'h-6',
          'mr-2',
          'items-center',
          'justify-center',
          'bg-slate-100',
          'shadow-lg',
        )}
      >
        <CheckBox.Indicator
          className={cn('text-gray-500')}
        >
          <CheckIcon />
        </CheckBox.Indicator>
      </CheckBox.Root>
      <label htmlFor={checkId}>{props.children}</label>
    </div>
  );
}

export { Checkbox }