Editable List

import { EditableList, EditableListItem } from '@/blocks/data-display/editable-list'
import { Star } from 'lucide-react'

export default function Example() {
  const [items, setItems] = useState<EditableListItem[]>([
    { id: 1, text: 'Task 1', completed: false },
    { id: 2, text: 'Task 2', completed: true },
  ])

  return (
    <>
      {/* Basic editable list */}
      <EditableList
        items={items}
        onChange={setItems}
        onItemDelete={(item) => console.log('Deleted:', item)}
      />

      {/* With drag-and-drop reordering */}
      <EditableList
        items={items}
        onChange={setItems}
        reorderable
      />

      {/* Without checkboxes */}
      <EditableList
        items={items}
        onChange={setItems}
        checkable={false}
      />

      {/* Read-only (no editing) */}
      <EditableList
        items={items}
        onChange={setItems}
        editable={false}
      />

      {/* With custom actions */}
      <EditableList
        items={items}
        onChange={setItems}
        actions={[
          {
            label: 'Star',
            icon: <Star className="w-4 h-4" />,
            onClick: (item) => console.log('Starred:', item),
          },
        ]}
      />

      {/* Custom empty message */}
      <EditableList
        items={[]}
        emptyMessage="No items yet"
      />
    </>
  )
}