import { CellTarget } from '@/type/template'
import { Grid } from 'lucide-react'

interface CellsBadgeProps {
  targetCells: CellTarget[]
  className?: string
}

export const CellsBadge: React.FC<CellsBadgeProps> = ({
  targetCells,
  className = 'absolute right-0 top-0',
}) => {
  if (!targetCells || targetCells.length === 0) {
    return null
  }

  return (
    <div className={`group/cells ${className}`}>
      <Grid className="h-3 w-3 cursor-help text-gray-500 opacity-60 transition-opacity hover:opacity-100" />
      <div className="pointer-events-none absolute right-0 top-full z-50 mt-2 whitespace-nowrap rounded bg-gray-900 p-2 text-xs text-white opacity-0 shadow-lg transition-opacity group-hover/cells:opacity-100">
        <div className="mb-1 font-medium">Целевые ячейки:</div>
        {targetCells.map((cell, i) => (
          <div key={i} className="font-mono">
            {cell.sheet}!{cell.cell}
            {cell.displayName && (
              <span className="ml-1 text-gray-300">({cell.displayName})</span>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}
