import React from 'react'
import { cn } from '../lib/utils'

interface CheckboxProps {
  checked: boolean
  onPress: () => void
  size?: number
  fillColor?: string
  checkColor?: string
  label?: string
}

export function Checkbox({
  checked,
  onPress,
  size = 20,
  fillColor = '#E63946',
  checkColor = '#FFFFFF',
  label,
}: CheckboxProps) {
  return (
    <button
      type="button"
      onClick={onPress}
      className={cn(
        'inline-flex items-center gap-2',
        'cursor-pointer border-none bg-transparent p-0'
      )}
      style={{ font: 'inherit', color: 'inherit' }}
    >
      <div
        style={{
          width: size,
          height: size,
          borderRadius: 4,
          border: `2px solid ${checked ? fillColor : '#D1D5DB'}`,
          backgroundColor: checked ? fillColor : 'transparent',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          transition: 'all 0.15s ease',
          flexShrink: 0,
        }}
      >
        {checked && (
          <svg
            width={size * 0.6}
            height={size * 0.6}
            viewBox="0 0 24 24"
            fill="none"
            stroke={checkColor}
            strokeWidth={3}
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <polyline points="20 6 9 17 4 12" />
          </svg>
        )}
      </div>
      {label && <span className="text-sm text-gray-700">{label}</span>}
    </button>
  )
}
