import React from 'react';
import './StatusBar.css';

const StatusBar: React.FC = () => {
  // Mock status data
  const coordinates = { x: 10.5, y: 20.3 };
  const snapEnabled = true;
  const activeLayer = 'Layer 1';
  const units = 'mm';
  
  return (
    <div className="status-bar" role="status" aria-label="Application Status">
      <div className="status-section coordinates">
        <span className="status-label">Coordinates:</span>
        <span className="status-value">X: {coordinates.x}, Y: {coordinates.y}</span>
      </div>
      <div className="status-section snap">
        <span className="status-label">Snap:</span>
        <button 
          className={`toggle-button ${snapEnabled ? 'enabled' : 'disabled'}`}
          aria-pressed={snapEnabled}
          aria-label={snapEnabled ? 'Snap enabled. Click to disable' : 'Snap disabled. Click to enable'}
        >
          {snapEnabled ? 'ON' : 'OFF'}
        </button>
      </div>
      <div className="status-section layer">
        <span className="status-label">Layer:</span>
        <span className="status-value">{activeLayer}</span>
      </div>
      <div className="status-section units">
        <span className="status-label">Units:</span>
        <span className="status-value">{units}</span>
      </div>
    </div>
  );
};

export default StatusBar;