import { CheckItem } from "@/lib/types"
import { Checkbox } from "@/components/ui/checkbox"
import { cn } from "@/lib/utils"

interface NoteChecklistProps {
  items: CheckItem[]
  onToggleItem: (itemId: string) => void
}

export function NoteChecklist({ items, onToggleItem }: NoteChecklistProps) {
  if (!items || items.length === 0) return null

  return (
    <div className="space-y-1">
      {items.map((item) => (
        <div
          key={item.id}
          className="flex items-start gap-2"
          onClick={(e) => {
            e.stopPropagation()
            onToggleItem(item.id)
          }}
        >
          <Checkbox
            checked={item.checked}
            className="mt-0.5"
          />
          <span
            className={cn(
              'text-sm',
              item.checked
                ? 'line-through text-gray-500 dark:text-gray-500'
                : 'text-gray-700 dark:text-gray-300'
            )}
          >
            {item.text}
          </span>
        </div>
      ))}
    </div>
  )
}