import { DeckTooltipLayer } from './DeckTooltip'
import { RepoCiTile, type RepoCiSummary } from './RepoCiTile'

export interface RepoCiStripProps {
  repos: RepoCiSummary[]
  selectedRepo: string | null
  onScope: (repo: string | null) => void
}

export function RepoCiStrip({ repos, selectedRepo, onScope }: RepoCiStripProps) {
  return (
    <section aria-label="Repository CI scope" className="overflow-x-auto">
      <div className="flex min-w-max gap-3 pb-2">
        <button
          type="button"
          aria-label="All repositories"
          aria-pressed={selectedRepo === null}
          onClick={() => onScope(null)}
          className={`min-w-28 rounded-xl border bg-surface px-5 py-4 text-sm font-bold text-fg focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${
            selectedRepo === null ? 'border-accent' : 'border-border hover:border-border-strong'
          }`}
        >
          All
        </button>
        {repos.map((summary) => (
          <RepoCiTile
            key={summary.repo}
            summary={summary}
            selected={selectedRepo === summary.repo}
            onScope={onScope}
          />
        ))}
      </div>
      {repos.length === 0 ? (
        <p role="status" className="mt-2 rounded-lg border border-dashed border-border bg-surface p-4 text-sm text-fg-muted">
          No repositories configured
        </p>
      ) : null}
      <DeckTooltipLayer />
    </section>
  )
}