import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

const Header: React.FC = () => {
  const { user, logout } = useAuth();
  const location = useLocation();

  return (
    <header style={{ 
      background: '#007bff', 
      color: 'white', 
      padding: '15px 0',
      marginBottom: '20px'
    }}>
      <div className="container">
        <div className="d-flex justify-content-between align-items-center">
          <div className="d-flex align-items-center gap-4">
            <h1 style={{ margin: 0, fontSize: '24px' }}>
              Sistema de Clientes
            </h1>
            <nav className="d-flex gap-3">
              <Link 
                to="/" 
                className={`text-decoration-none ${location.pathname === '/' ? 'text-warning' : 'text-white'}`}
                style={{ 
                  padding: '8px 16px', 
                  borderRadius: '4px',
                  background: location.pathname === '/' ? 'rgba(255,255,255,0.2)' : 'transparent',
                  transition: 'all 0.3s ease'
                }}
              >
                Gerenciar Clientes
              </Link>
              <Link 
                to="/search" 
                className={`text-decoration-none ${location.pathname === '/search' ? 'text-warning' : 'text-white'}`}
                style={{ 
                  padding: '8px 16px', 
                  borderRadius: '4px',
                  background: location.pathname === '/search' ? 'rgba(255,255,255,0.2)' : 'transparent',
                  transition: 'all 0.3s ease'
                }}
              >
                Buscar e Filtrar
              </Link>
            </nav>
          </div>
          <div className="d-flex align-items-center gap-2">
            <span>Olá, {user?.username}</span>
            <button
              className="btn btn-secondary"
              onClick={logout}
              style={{ background: 'rgba(255,255,255,0.2)', border: '1px solid rgba(255,255,255,0.3)' }}
            >
              Sair
            </button>
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;