import { Task, TaskStatus } from '@/lib/types';
import { TaskCard } from './TaskCard';

interface KanbanColumnProps {
  id: TaskStatus;
  title: string;
  color: string;
  tasks: Task[];
}

export function KanbanColumn({ id, title, color, tasks }: KanbanColumnProps) {
  const colorClasses = {
    gray: 'border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-800',
    blue: 'border-blue-300 bg-blue-50 dark:border-blue-600 dark:bg-blue-900/20',
    green: 'border-green-300 bg-green-50 dark:border-green-600 dark:bg-green-900/20',
    red: 'border-red-300 bg-red-50 dark:border-red-600 dark:bg-red-900/20'
  };

  const headerColorClasses = {
    gray: 'text-gray-700 dark:text-gray-300',
    blue: 'text-blue-700 dark:text-blue-300',
    green: 'text-green-700 dark:text-green-300',
    red: 'text-red-700 dark:text-red-300'
  };

  return (
    <div className="flex-shrink-0 w-80">
      {/* En-tête de colonne */}
      <div className={`rounded-t-lg border-2 border-b-0 p-4 ${colorClasses[color as keyof typeof colorClasses]}`}>
        <div className="flex items-center justify-between">
          <h3 className={`font-semibold text-lg ${headerColorClasses[color as keyof typeof headerColorClasses]}`}>
            {title}
          </h3>
          <span className={`px-2 py-1 rounded-full text-xs font-medium ${headerColorClasses[color as keyof typeof headerColorClasses]} bg-white/50 dark:bg-black/20`}>
            {tasks.length}
          </span>
        </div>
      </div>

      {/* Zone de contenu */}
      <div className={`border-2 border-t-0 rounded-b-lg min-h-96 p-4 ${colorClasses[color as keyof typeof colorClasses]}`}>
        <div className="space-y-3">
          {tasks.length === 0 ? (
            <div className="text-center py-8 text-gray-500 dark:text-gray-400">
              <div className="text-4xl mb-2">📝</div>
              <p className="text-sm">Aucune tâche</p>
            </div>
          ) : (
            tasks.map((task) => (
              <TaskCard key={task.id} task={task} />
            ))
          )}
        </div>
      </div>
    </div>
  );
}