import { useDeckTooltip } from '@overdeck/deck-ui'
import type { JSX } from 'react'
import { repoDisplayName } from './factory-helpers'

export function FactoryRepoLabel(props: { repo: string | null; repoName?: string | null }): JSX.Element {
  const fullPath = props.repo?.trim() || 'unassigned'
  const label = repoDisplayName({ repo: props.repo, repoName: props.repoName ?? null })
  const tooltip = useDeckTooltip(fullPath, 'Target repository')

  return (
    <span className="inline-flex min-w-0 items-center gap-1 text-xs text-fg-subtle">
      <span className="font-semibold uppercase tracking-wide text-fg-muted">repo</span>
      <span
        className="truncate font-medium text-fg"
        title={fullPath}
        aria-label={`Repository ${fullPath}`}
        {...tooltip}
      >
        {label}
      </span>
    </span>
  )
}