import { TaskHeadless } from '@tour-kit/checklists/headless';

<TaskHeadless checklistId="onboarding" taskId="step1">
  {({ task, isCompleted, toggle }) => (
    <button onClick={toggle} disabled={task.locked}>
      {isCompleted ? '✓' : '○'} {task.config.title}
    </button>
  )}
</TaskHeadless>

<TaskHeadless checklistId="onboarding" taskId="step1">
  {({ task, isCompleted, isLocked, execute }) => (
    <div className="task-card">
      <div className="icon">
        {task.config.icon ?? (isCompleted ? '✓' : '○')}
      </div>
      <div className="content">
        <h4>{task.config.title}</h4>
        <p>{task.config.description}</p>
      </div>
      <button onClick={execute} disabled={isLocked}>
        {isCompleted ? 'Done' : 'Start'}
      </button>
    </div>
  )}
</TaskHeadless>