'use client';

import { Task } from '@/lib/types';
import { TaskSelector } from '@/components/ui/TaskSelector';
import { useTaskSelector } from '@/hooks/useTaskSelector';

interface TaskSelectorWithDataProps {
  selectedTaskId?: string;
  onTaskSelect: (task: Task | null) => void;
  placeholder?: string;
  className?: string;
  excludePinnedTasks?: boolean;
  maxHeight?: string;
}

export function TaskSelectorWithData({
  selectedTaskId,
  onTaskSelect,
  placeholder = 'Sélectionner une tâche...',
  className = '',
  excludePinnedTasks = true,
  maxHeight = 'max-h-60',
}: TaskSelectorWithDataProps) {
  const { tasks, loading, loaded } = useTaskSelector({
    selectedTaskId,
    excludePinnedTasks,
  });

  // Afficher un état de chargement si les tâches ne sont pas encore chargées
  if (!loaded && loading) {
    return (
      <div
        className={`${className} flex items-center justify-center px-3 py-2 text-sm bg-[var(--card)] border border-[var(--border)] rounded-md`}
      >
        <span className="text-[var(--muted-foreground)]">
          Chargement des tâches...
        </span>
      </div>
    );
  }

  return (
    <TaskSelector
      tasks={tasks}
      selectedTaskId={selectedTaskId}
      onTaskSelect={onTaskSelect}
      placeholder={placeholder}
      className={className}
      excludePinnedTasks={excludePinnedTasks}
      maxHeight={maxHeight}
      loading={loading}
    />
  );
}
