import { React, h, Box, Text } from './plugins.js';
import type { IChatUsage } from './plugins.js';

interface IStatusBarProps {
  modelName?: string;
  usage: IChatUsage;
  busy: boolean;
}

export function StatusBar({ modelName, usage, busy }: IStatusBarProps): React.ReactElement {
  const children: React.ReactNode[] = [
    h(Text, { dimColor: true, key: 'model' }, modelName ? `model: ${modelName}` : 'smartchat'),
    h(Text, { dimColor: true, key: 'sep1' }, ' | '),
    h(Text, { dimColor: true, key: 'tokens' }, `tokens: ${usage.totalTokens.toLocaleString()}`),
    h(Text, { dimColor: true, key: 'sep2' }, ' | '),
    h(Text, { dimColor: true, key: 'turns' }, `turns: ${usage.turns}`),
  ];

  if (busy) {
    children.push(
      h(Text, { dimColor: true, key: 'sep3' }, ' | '),
      h(Text, { color: 'yellow', key: 'thinking' }, 'thinking...'),
    );
  }

  return h(
    Box,
    { borderStyle: 'single' as const, borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, paddingX: 1 },
    ...children,
  );
}