"use client"

import { cva, type VariantProps } from 'class-variance-authority'
import type { ComponentPropsWithRef } from 'react'
import clsx from 'clsx'

const checkboxVariants = cva('checkbox', {
  variants: {
    size: {
      xs: 'checkbox-xs',
      sm: 'checkbox-sm',
      md: 'checkbox-md',
      lg: 'checkbox-lg'
    },
    color: {
      primary: 'checkbox-primary',
      secondary: 'checkbox-secondary',
      accent: 'checkbox-accent',
      destructive: 'checkbox-destructive',
      success: 'checkbox-success',
      warning: 'checkbox-warning',
      info: 'checkbox-info',
      error: 'checkbox-error'
    }
  },
  defaultVariants: {
    size: 'sm',
    color: 'primary'
  }
})

export type CheckboxProps = Omit<ComponentPropsWithRef<'input'>, 'size' | 'checked' | 'onChange'> & 
  VariantProps<typeof checkboxVariants> & {
    checked?: boolean
    defaultChecked?: boolean
    onChange?: (checked: boolean) => void
  }

const Checkbox = ({
  className,
  size,
  color,
  checked,
  defaultChecked,
  onChange,
  ...props
}: CheckboxProps) => {
  const controlProps = checked !== undefined ? { checked } : { defaultChecked }

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    onChange?.(event.target.checked)
  }

  return (
    <input
      type="checkbox"
      onChange={handleChange}
      className={clsx(checkboxVariants({ size, color, className }))}
      {...controlProps}
      {...props}
    />
  )
}

export { Checkbox }