// StatusBar — bottom rail. Mono, dense, 24px tall.

const StatusBar = ({ branch, problems, position, syntax }) => (
  <div style={sbStyles.root}>
    <div style={sbStyles.left}>
      <span style={sbStyles.cell}>
        <Icon name="git-branch" size={12}/> {branch}
      </span>
      <span style={{ ...sbStyles.cell, color: problems.errors ? '#ff854f' : 'var(--fg-2)' }}>
        <Icon name="x" size={12}/> {problems.errors}
      </span>
      <span style={{ ...sbStyles.cell, color: problems.warnings ? '#ffe14e' : 'var(--fg-2)' }}>
        <Icon name="alert" size={12}/> {problems.warnings}
      </span>
    </div>
    <div style={sbStyles.right}>
      <span style={sbStyles.cell}>{syntax}</span>
      <span style={sbStyles.cell}>UTF-8</span>
      <span style={sbStyles.cell}>LF</span>
      <span style={sbStyles.cell}>{position}</span>
      <span style={{ ...sbStyles.cell, color: '#51e08a' }}>
        <Icon name="circle" size={8}/> live
      </span>
    </div>
  </div>
);

const sbStyles = {
  root: {
    height: 26, flex: '0 0 26px',
    display: 'flex', justifyContent: 'space-between',
    padding: '0 14px',
    background: '#222531',
    borderTop: '1px solid #373b46',
    fontFamily: 'var(--font-mono)', fontSize: 11,
    color: 'var(--fg-2)',
    letterSpacing: '0.03em',
  },
  left:  { display:'flex', alignItems:'center', gap: 14 },
  right: { display:'flex', alignItems:'center', gap: 14 },
  cell:  { display:'flex', alignItems:'center', gap: 5 },
};

window.StatusBar = StatusBar;