import React from 'react';

const Header = () => {
  return (
    <header className="bg-banorte-red text-white shadow-lg border-b-4 border-banorte-red">
      <div className="max-w-[1700px] mx-auto px-4 md:px-6 lg:px-8 py-1 flex items-center justify-between">
        {/* Logo Section */}
        <div className="flex items-center">
          <img
            src="/images/banortelogo.png"
            alt="Banorte Logo"
            className="h-10 w-auto"
          />
        </div>

        {/* User Section 
        <div className="group relative flex items-center space-x-3 bg-white/10 hover:bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full cursor-pointer transition-all duration-300 hover:shadow-lg">
          <div className="flex flex-col items-end">
            <span className="text-xs text-white/70 font-light">Usuario</span>
            <span className="text-sm md:text-base font-semibold text-white">A8072846</span>
          </div>
          <div className="relative">
            <img
              src="/images/chat_maya_default_avatar.png"
              alt="Usuario"
              className="w-10 h-10 md:w-12 md:h-12 rounded-full border-3 border-white shadow-lg group-hover:scale-110 transition-transform duration-300"
            />
            <div className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
          </div>
        </div>*/}
      </div>
    </header>
  );
};

export default Header;
