'use client'

import { Check } from 'lucide-react'
import { cn } from '@/lib/utils'

export function NoteSelectCheckbox({
  checked,
  onToggle,
  label,
  className,
}: {
  checked: boolean
  onToggle: () => void
  label: string
  className?: string
}) {
  return (
    <button
      type="button"
      role="checkbox"
      aria-checked={checked}
      aria-label={label}
      onPointerDown={(e) => e.stopPropagation()}
      onClick={(e) => {
        e.stopPropagation()
        onToggle()
      }}
      className={cn(
        'shrink-0 w-5 h-5 rounded border flex items-center justify-center transition-colors',
        checked
          ? 'bg-brand-accent border-brand-accent text-white'
          : 'border-foreground/25 bg-background/90 hover:border-brand-accent/60',
        className,
      )}
    >
      {checked ? <Check size={12} strokeWidth={3} /> : null}
    </button>
  )
}