import React from 'react';
import { useDroppable } from '@dnd-kit/core';
import {
  SortableContext,
  verticalListSortingStrategy,
} from '@dnd-kit/sortable';
import { DeploymentCard } from './DeploymentCard';
import type { Deployment, TaskStatus } from '../../../shared/types.js';
import { clsx } from 'clsx';

interface KanbanColumnProps {
  id: TaskStatus;
  title: string;
  color: string;
  deployments: Deployment[];
}

export const KanbanColumn: React.FC<KanbanColumnProps> = ({
  id,
  title,
  color,
  deployments,
}) => {
  const { setNodeRef, isOver } = useDroppable({
    id,
  });

  return (
    <div
      ref={setNodeRef}
      className={clsx(
        'flex flex-col rounded-lg p-4 min-h-[600px]',
        color,
        isOver && 'ring-2 ring-blue-500 ring-opacity-50'
      )}
    >
      <div className="mb-4">
        <h3 className="font-semibold text-gray-700">{title}</h3>
        <span className="text-sm text-gray-500">{deployments.length} items</span>
      </div>

      <div className="flex-1 space-y-3">
        <SortableContext
          items={deployments.map((d) => d.id)}
          strategy={verticalListSortingStrategy}
        >
          {deployments.map((deployment) => (
            <DeploymentCard key={deployment.id} deployment={deployment} />
          ))}
        </SortableContext>
      </div>
    </div>
  );
};