'use client';
import { TasksProvider, useTasks } from './TasksProvider';
import UpcomingTasksKanban from './UpcomingTasksKanban';
import TasksList from './TasksList';
import TaskFilters from './TaskFilters';
import { Suspense } from 'react';

function TasksContent() {
  const { view } = useTasks();

  return (
    <div>
      <TaskFilters />
      {view === 'grid' ? (
        <UpcomingTasksKanban />
      ) : (
        <TasksList />
      )}
    </div>
  );
}

export default function TasksPage() {
  return (
    <TasksProvider>
      <Suspense fallback={<></>}>
        <TasksContent />
      </Suspense>
    </TasksProvider>
  );
}