import React from 'react';

const Header = () => {
  const userEmail = localStorage.getItem("userEmail") || "Admin User";
  
  // Extracting a name from email for display (e.g., "admin" from "admin@gmail.com")
  const displayName = userEmail.split('@')[0];

  const handleLogout = () => {
    localStorage.clear();
    window.location.href = "/";
  };

  return (
    <header style={{ 
      height: '70px',
      padding: '0 30px', 
      backgroundColor: '#fff', 
      borderBottom: '1px solid #e0e0e0',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      position: 'sticky',
      top: 0,
      zIndex: 100
    }}>
   
      <div style={{ display: 'flex', alignItems: 'center', gap: '40px', flex: 1 }}>
        <h2 style={{ margin: 0, fontSize: '20px', color: '#333', fontWeight: '600' }}>Dashboard</h2>
        
      </div>
        <div style={{ 
          display: 'flex', 
          alignItems: 'center', 
          gap: '12px', 
          paddingLeft: '20px', 
          borderLeft: '1px solid #eee' 
        }}>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: '14px', fontWeight: '600', color: '#333', textTransform: 'capitalize' }}>
              {displayName}
            </div>
            <div style={{ fontSize: '12px', color: '#666' }}>Administrator</div>
          </div>
          
         <div 
  style={{
    width: '35px',
    height: '35px',
    borderRadius: '50%',
    backgroundColor: '#f1f5f9',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    cursor: 'pointer',
    transition: 'all 0.2s'
  }} 
  onClick={handleLogout} 
  title="Click to Logout"
  onMouseOver={(e) => {
    e.currentTarget.style.backgroundColor = '#fee2e2';
    e.currentTarget.style.color = '#dc2626';
  }}
  onMouseOut={(e) => {
    e.currentTarget.style.backgroundColor = '#f1f5f9';
    e.currentTarget.style.color = '#64748b';
  }}
>
  <svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="18" 
    height="18" 
    viewBox="0 0 24 24" 
    fill="none" 
    stroke="currentColor" 
    strokeWidth="2.5" 
    strokeLinecap="round" 
    strokeLinejoin="round"
  >
    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
    <polyline points="16 17 21 12 16 7"></polyline>
    <line x1="21" y1="12" x2="9" y2="12"></line>
  </svg>
</div>
        </div>
    </header>
  );
};

export default Header;