import { useDroppable } from "@dnd-kit/core"
import { TableCell } from "@mui/material"
import { alpha } from "@mui/material/styles"
import type React from "react"

export function DroppableCell({
  driverId,
  children,
  height,
}: {
  driverId: string
  children: React.ReactNode
  height: string
}) {
  const { setNodeRef, isOver } = useDroppable({
    id: `driver-${driverId}`,
  })

  return (
    <TableCell
      ref={setNodeRef}
      tabIndex={-1}
      sx={{
        position: "relative",
        padding: 0,
        borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
        borderLeft: (theme) => `1px solid ${theme.palette.divider}`,
        backgroundColor: (theme) => (isOver ? alpha(theme.palette.primary.main, 0.1) : "white"),
        "&:last-of-type": {
          borderRight: (theme) => `1px solid ${theme.palette.divider}`,
        },
        height,
        outline: "none",
      }}
    >
      {children}
    </TableCell>
  )
}