import type { JSX } from 'react'

export type AgentViewMode = 'live' | 'historical'

export function AgentModeToggle(props: {
  mode: AgentViewMode
  liveAvailable: boolean
  onModeChange(mode: AgentViewMode): void
}): JSX.Element {
  return (
    <div className="inline-flex w-fit overflow-hidden rounded-md border border-border bg-surface" role="group" aria-label="Attempt view mode">
      {(['live', 'historical'] as const).map((mode) => (
        <button
          key={mode}
          type="button"
          disabled={mode === 'live' && !props.liveAvailable}
          aria-pressed={props.mode === mode}
          onClick={() => props.onModeChange(mode)}
          className="min-h-11 border-l border-border px-4 text-xs font-semibold capitalize text-fg-muted first:border-l-0 hover:bg-surface-raised aria-pressed:bg-surface-raised aria-pressed:text-fg disabled:cursor-not-allowed disabled:opacity-50"
        >
          {mode === 'live' ? 'Live' : 'Historical'}
        </button>
      ))}
    </div>
  )
}