import React from 'react';
import TaskCard from '../task/TaskCard';

export default function SectionColumn({ section, tasks = [], onSelectTask, onAddTask }) {
  const wipLimit = section?.wip_limit || 10;

  return (
    <div className="w-80 shrink-0 flex flex-col bg-[#1E293B] border border-slate-800 rounded-2xl max-h-full">
      <div className="p-4 border-b border-slate-800 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <span className="h-2.5 w-2.5 rounded-full bg-sky-500" />
          <h3 className="font-semibold text-sm text-slate-100">{section?.name || 'Section'}</h3>
          <span className="text-xs bg-[#273449] px-2 py-0.5 rounded-full text-slate-300 border border-slate-800">
            {tasks.length}
          </span>
        </div>
        <span className="text-xs text-emerald-400 font-medium">WIP {tasks.length}/{wipLimit}</span>
      </div>

      <div className="p-3 overflow-y-auto space-y-3 flex-1">
        {tasks.map((task) => (
          <TaskCard key={task.id} task={task} onClick={onSelectTask} />
        ))}
      </div>

      <div className="p-3 border-t border-slate-800">
        <button
          onClick={() => onAddTask?.(section?.id)}
          className="w-full py-2 bg-[#273449]/60 hover:bg-[#273449] text-xs font-medium text-slate-300 hover:text-white rounded-xl border border-dashed border-slate-800 hover:border-sky-500 transition-all"
        >
          + Add Task
        </button>
      </div>
    </div>
  );
}