import React from 'react';

const Header = ({ tournamentName }) => {
  return (
    <header style={{
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      height: '60px',
      backgroundColor: '#ffffff',
      borderBottom: '1px solid #e5e7eb',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      padding: '0 20px',
      zIndex: 1000,
      boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
    }}>
      <div style={{
        display: 'flex',
        alignItems: 'center',
        gap: '12px'
      }}>
        <div style={{
          width: '32px',
          height: '32px',
          backgroundColor: '#2563eb',
          borderRadius: '50%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
          fontWeight: 'bold',
          fontSize: '14px'
        }}>
          T
        </div>
        <h1 style={{
          fontSize: '18px',
          fontWeight: '600',
          margin: 0,
          color: '#1e293b'
        }}>
          {tournamentName || 'Tournament Manager'}
        </h1>
      </div>
      
      <div style={{
        fontSize: '12px',
        color: '#64748b',
        fontWeight: '500'
      }}>
        {new Date().toLocaleDateString()}
      </div>
    </header>
  );
};

export default Header;