import { GripVertical, Tickets } from 'lucide-react'
import { useRef } from 'react'
import type { ReactNode } from 'react'

function KanbanColumn({
  children,
  name,
  itemCount,
}: {
  children: ReactNode
  name: string
  itemCount: number
}) {
  const column = useRef<HTMLDivElement>(null)

  const handleDraggableStart = () => {
    column.current?.setAttribute('draggable', 'true')
  }

  const handleDraggableStop = () => {
    column.current?.setAttribute('draggable', 'false')
  }

  const handleDragStart = (e: DragEvent) => {
    e.dataTransfer?.setData('text/custom', 'ASDF')
  }

  const handleDragStop = () => {
    column.current?.setAttribute('draggable', 'false')
  }

  return (
    <div
      className="min-w-96 bg-accent rounded-md p-4 snap-center"
      ref={column}
      onDragStart={handleDragStart}
      onDragEnd={handleDragStop}
    >
      <div className="flex justify-between mb-2">
        <div className="flex place-items-center">
          <GripVertical
            size={20}
            className="mr-2 cursor-grab"
            onMouseDown={handleDraggableStart}
            onMouseUp={handleDraggableStop}
          />
          <p>{name}</p>
        </div>
        <div className="flex place-items-center gap-2">
          {itemCount}
          <Tickets size={20} />
        </div>
      </div>
      {children}
    </div>
  )
}

export default KanbanColumn