<TaskCard
  key={category}
  category={category}
  tasks={filterdTasks[category]} // ✅ এই লাইন অ্যাড করো
  onEditTask={handleEditTask}
/>

export default function TaskCard({ category, tasks, onEditTask }) {
  const backgroundColor = {
    todo: "bg-indigo-600",
    inprogress: "bg-yellow-500",
    done: "bg-teal-500",
    revised: "bg-rose-500",
  };
 
  const background = backgroundColor[category];
 
  return (
    <div className="mb-4 w-full px-2 sm:w-1/2 md:w-1/4">
      {tasks?.length > 0 && (
        <div className={`rounded-lg ${background} p-4`}>
          <div className="mb-2 flex items-center justify-between">
            <h3 className="text-lg font-semibold">
              {category} ({tasks.length})
            </h3>
            <SortingBtn />
          </div>
          <div>
            {tasks.map((task) => (
              <Task
                key={task.id}
                task={task}
                category={category}
                onEditTask={onEditTask}
              />
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

const noTasksFound =
  filterdTasks.todo.length === 0 &&
  filterdTasks.inprogress.length === 0 &&
  filterdTasks.done.length === 0 &&
  filterdTasks.revised.length === 0;

{
  anyTasksExist ? (
    noTasksFound ? (
      <div className="flex justify-center items-center text-gray-400 text-xl mt-10">
        No tasks found for your search.
      </div>
    ) : (
      <div className="mx-2 mb-6 flex flex-wrap">
        {Object.keys(filterdTasks).map((category) => (
          <TaskCard
            key={category}
            category={category}
            tasks={filterdTasks[category]}
            onEditTask={handleEditTask}
          />
        ))}
      </div>
    )
  ) : (
    <div className="flex justify-center items-center text-gray-500 text-xl">
      Task List is empty. Add task first.
    </div>
  );
}