import React, { type PropsWithChildren } from 'react'

import { Checkbox as NextUiCheckbox } from '@/components/heroui/SelectionControls'
import { cn } from '@/lib/cn'

interface CheckboxProps {
  className?: string
  value?: string
  isSelected?: boolean
  onValueChange?: (isSelected: boolean) => void
}

const Checkbox = ({ children, className, value, isSelected, onValueChange }: PropsWithChildren<CheckboxProps>) => {
  return (
    <NextUiCheckbox
      aria-label={'checkbox'}
      classNames={{
        base: cn(
          'inline-flex w-full max-w-full m-0 bg-background-10',
          'hover:bg-content2 items-center justify-start',
          'cursor-pointer rounded-xl p-4 border-2 border-transparent',
          'data-[selected=true]:border-primary data-[selected=true]:bg-background-70',
          className
        ),
        label: 'w-full',
      }}
      isSelected={isSelected}
      value={value}
      onValueChange={onValueChange}
    >
      {children}
    </NextUiCheckbox>
  )
}

export default Checkbox