import { useDeckTooltip } from './DeckTooltip'
import type { CiCoverageGap } from './ci-coverage'

export interface CiCoverageBannerProps {
  gaps: CiCoverageGap[]
  /** Prefix each headline with the repo slug (e.g. `alexcodeplace/multideal: …`). */
  repoPrefix?: string
  className?: string
}

function CoverageLine({
  gap,
  repoPrefix,
}: {
  gap: CiCoverageGap
  repoPrefix?: string
}) {
  const headline = repoPrefix ? `${repoPrefix}: ${gap.headline}` : gap.headline
  const tooltip = useDeckTooltip(headline, `${gap.detail} ${gap.action}`)

  return (
    <p {...tooltip} className="cursor-help">
      <span className="font-medium">{headline}</span>
      <span className="mt-0.5 block text-fg-muted">{gap.action}</span>
    </p>
  )
}

export function CiCoverageBanner({ gaps, repoPrefix, className = '' }: CiCoverageBannerProps) {
  if (gaps.length === 0) return null

  return (
    <div
      role="status"
      className={`space-y-2 rounded-lg border border-warning/40 bg-warning/10 p-3 text-xs text-warning ${className}`.trim()}
    >
      {gaps.map((gap) => (
        <CoverageLine key={gap.id} gap={gap} repoPrefix={repoPrefix} />
      ))}
    </div>
  )
}