"use client";

import React from "react";
import { useDroppable } from "@dnd-kit/core";
import { Box, Typography, Chip } from "@mui/material";
import { DroppableColumnProps } from "../types";
import { DraggableItem } from "./DraggableItem";

export function DroppableColumn({
  id,
  title,
  items,
  activeId,
}: DroppableColumnProps) {
  const { setNodeRef, isOver } = useDroppable({
    id,
  });

  return (
    <Box
      ref={setNodeRef}
      className="matcher-board__column"
      sx={{
        flex: 1,
        minWidth: 300,
        maxWidth: 400,
        bgcolor: isOver ? "action.hover" : "background.paper",
        borderRadius: 2,
        p: 2,
        border: "2px solid",
        borderColor: isOver ? "primary.main" : "divider",
        transition: "all 0.2s ease",
      }}
    >
      <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
        {title}
      </Typography>
      <Box
        className="matcher-board__column-content"
        sx={{
          minHeight: 400,
          maxHeight: 600,
          overflowY: "auto",
        }}
      >
        {items.map(item => (
          <DraggableItem
            key={item.id}
            item={item}
            isDragging={activeId === item.id}
          />
        ))}
        {items.length === 0 && (
          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              minHeight: 200,
              border: "2px dashed",
              borderColor: "divider",
              borderRadius: 1,
            }}
          >
            <Typography variant="body2" color="text.secondary">
              Drop items here
            </Typography>
          </Box>
        )}
      </Box>
      <Chip
        label={`${items.length} items`}
        size="small"
        sx={{ mt: 2 }}
        color="primary"
        variant="outlined"
      />
    </Box>
  );
}