src/components/Compiler/StatusBar.tsx

import { LANGUAGE_OPTIONS } from './useCompiler.js';

interface StatusBarProps {
  language: string;
  cursorLine: number;
  cursorCol: number;
  status: string;
}

function getLanguageLabel(value: string) {
  return LANGUAGE_OPTIONS.find((l: any) => l.value === value)?.label ?? value;
}

function statusLabel(status: string) {
  switch (status) {
    case 'running':       return 'Running…';
    case 'success':       return 'Success';
    case 'error':         return 'Error';
    case 'compile_error': return 'Compile Error';
    default:              return 'Ready';
  }
}

export default function StatusBar({ language, cursorLine, cursorCol, status }: StatusBarProps) {
  return (
    <div className="ryp-statusbar">
      <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
        <span className="ryp-statusbar__item">{getLanguageLabel(language)}</span>
        <span className="ryp-statusbar__item" style={{ opacity: 0.7 }}>UTF-8</span>
        <span className="ryp-statusbar__item">Ln {cursorLine}, Col {cursorCol}</span>
        <span className="ryp-statusbar__item">
          <span
            className={`ryp-statusbar__dot${
              status === 'error' || status === 'compile_error'
                ? ' ryp-statusbar__dot--error'
                : status === 'running'
                  ? ' ryp-statusbar__dot--running'
                  : ''
            }`}
          />
          {statusLabel(status)}
        </span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
        <span className="ryp-statusbar__item" style={{ opacity: 0.7 }}>RYP Engine</span>
      </div>
    </div>
  );
}