import { KvPanel, SectionCard, StaleBadge } from '@overdeck/deck-ui'
import { adapterIdForPanel } from '../../lib/collector-client'
import type { AdapterStatus, Panel } from '../../lib/collector-types'
import { ciKvRows } from '../../lib/overview-mappers'
import type { GhciPanelData } from '../../lib/panel-data'
import { OVERVIEW_KV_SCROLL_CLASS } from './overview-layout'

export interface CiCardProps {
  panels: Panel[]
  adapters: AdapterStatus[]
}

export function CiCard({ panels, adapters }: CiCardProps) {
  const panel = panels.find((p) => p.id === 'ci')
  const rows = panel ? ciKvRows(panel.data as GhciPanelData) : []
  const status = adapters.find((a) => a.id === adapterIdForPanel('ci'))

  return (
    <SectionCard title="CI & Runners" titleBadge={status ? <StaleBadge status={status} /> : undefined}>
      <div className={OVERVIEW_KV_SCROLL_CLASS}>
        <KvPanel rows={rows} />
      </div>
    </SectionCard>
  )
}