import { useTranslation } from 'react-i18next'

interface DatasetStatusBarProps {
  selectedCount: number
  totalShown: number
  firstSelectedName: string | null
  canValidate: boolean
  onValidate: () => void
}

export default function DatasetStatusBar({
  selectedCount,
  totalShown,
  firstSelectedName,
  canValidate,
  onValidate,
}: DatasetStatusBarProps) {
  const { t } = useTranslation()

  return (
    <div className="bracket panel relative flex items-center gap-3 px-3 shrink-0" style={{ height: 44 }}>
      <span className="br" />

      <button
        type="button"
        className="btn btn-primary"
        disabled={!canValidate}
        onClick={onValidate}
      >
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
          <polyline points="20 6 9 17 4 12" />
        </svg>
        {t('dataset.validate')} ({selectedCount})
      </button>

      <span className="w-px h-5 bg-border-hair shrink-0" />

      <div className="flex items-center gap-2 min-w-0">
        <span className="micro">{t('dataset.selected')}</span>
        <span className="mono text-[12px] text-text-primary truncate">
          {firstSelectedName ?? '—'}
        </span>
      </div>

      <div className="ml-auto flex items-center gap-3">
        <span className="text-[11px] text-text-muted">
          {t('dataset.ofSelected', { count: selectedCount, total: totalShown })}
        </span>
      </div>
    </div>
  )
}
