import React from "react"

interface ContentCardProps {
  description: string
  icon: React.ReactNode
  className?: string
  children?: React.ReactNode
  onClick?: () => void
  onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void
  onDrop?: (e: React.DragEvent<HTMLDivElement>) => void
  onDragEnter?: (e: React.DragEvent<HTMLDivElement>) => void
  onDragLeave?: (e: React.DragEvent<HTMLDivElement>) => void
}

export const ContentCard: React.FC<ContentCardProps> = ({
  description,
  icon,
  className = "",
  children,
  onClick,
  onDragOver,
  onDrop,
  onDragEnter,
  onDragLeave,
}) => {
  return (
    <div
      className={`flex flex-col items-center justify-center gap-2 bg-white card p-4 rounded-lg shadow-md min-w-[250px] w-full h-[150px] cursor-pointer transition border border-gray-200 hover:shadow-lg ${className}`}
      onClick={onClick}
      onDragOver={onDragOver}
      onDrop={onDrop}
      onDragEnter={onDragEnter}
      onDragLeave={onDragLeave}
    >
      <div className="text-blue-500 flex justify-center items-center">
        {icon}
      </div>
      <span className="text-sm text-center text-gray-700">{description}</span>
      {children}
    </div>
  )
}
