import React from "react";
import { Badge } from "@/components/ui/badge";
import { Plus, MoreVertical } from "lucide-react";
import { Droppable } from "@hello-pangea/dnd";

const columnConfig = {
  pending: { bg: "bg-blue-500", label: "Pending" },
  in_progress: { bg: "bg-amber-500", label: "In Progress" },
  on_hold: { bg: "bg-teal-500", label: "On Hold" },
  completed: { bg: "bg-green-500", label: "Completed" }
};

export default function TaskColumn({ status, tasks, children, onAddTask }) {
  const config = columnConfig[status] || columnConfig.pending;
  
  return (
    <div className="flex-1 min-w-[320px]">
      {/* Column Header */}
      <div className={`${config.bg} text-white rounded-lg px-4 py-3 mb-4 flex items-center justify-between`}>
        <div className="flex items-center gap-2">
          <span className="font-bold">{config.label}</span>
          <Badge className="bg-white/20 text-white border-0 font-bold">
            {tasks.length}
          </Badge>
        </div>
        <div className="flex items-center gap-1">
          <button 
            onClick={() => onAddTask(status)}
            className="w-6 h-6 hover:bg-white/20 rounded flex items-center justify-center transition-colors"
          >
            <Plus className="w-4 h-4" />
          </button>
          <button className="w-6 h-6 hover:bg-white/20 rounded flex items-center justify-center transition-colors">
            <MoreVertical className="w-4 h-4" />
          </button>
        </div>
      </div>

      {/* Droppable Area */}
      <Droppable droppableId={status}>
        {(provided, snapshot) => (
          <div
            ref={provided.innerRef}
            {...provided.droppableProps}
            className={`min-h-[500px] rounded-lg p-3 transition-colors ${
              snapshot.isDraggingOver ? 'bg-blue-50 border-2 border-dashed border-blue-300' : 'bg-slate-50/50'
            }`}
          >
            {children}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </div>
  );
}