Expandable Data List

import { ExpandableDataList } from '@/blocks/data-display/expandable-data-list'

const projectData = [
  {
    id: 'prj_001',
    owner: { name: 'Olivia Chen' },
    project: 'Marketing Strategy',
    tasks: 12,
    status: 'completed',
    children: [
      { id: 'tsk_001', description: 'Define target audience', hours: 4.0, status: 'completed' },
      { id: 'tsk_002', description: 'Competitor analysis', hours: 6.0, status: 'completed' },
    ]
  },
]

const parentColumns = [
  {
    key: 'owner',
    header: 'Owner',
    width: '200px',
    render: (value) => (
      <div className="flex items-center gap-3">
        <Avatar name={value.name} />
        <span>{value.name}</span>
      </div>
    )
  },
  { key: 'project', header: 'Project', width: '1fr' },
  { key: 'tasks', header: 'Tasks', width: '100px' },
  { key: 'status', header: 'Status', width: '140px', render: (value) => <StatusBadge status={value} /> }
]

const childColumns = [
  { key: 'description', header: 'Task', width: '1fr' },
  { key: 'hours', header: 'Hours', width: '100px', render: (v) => `${v.toFixed(1)}h` },
  { key: 'status', header: 'Status', width: '120px', render: (value) => <StatusBadge status={value} /> },
]

export default function Example() {
  return (
    <ExpandableDataList
      data={projectData}
      columns={parentColumns}
      childKey="children"
      childColumns={childColumns}
      rowHeight={64}
      childRowHeight={52}
      searchPlaceholder="Search projects, tasks..."
      onRowClick={(row) => console.log('Parent:', row.id)}
      onChildRowClick={(child, parent) => console.log('Child:', child.id)}
    />
  )
}