Header.tsx

import React from 'react';

interface HeaderProps {
  userData: {
    name: string;
    location: string;
    weather: string;
    date: string;
  };
  toggleSidebar: () => void;
  isSidebarOpen: boolean;
}

const Header: React.FC<HeaderProps> = ({ userData, toggleSidebar, isSidebarOpen }) => {
  return (
    <header className="h-14 bg-white border-b border-[#c5a059]/5 px-6 flex items-center justify-between sticky top-0 z-30">
      <div className="flex items-center">
        <button 
          onClick={toggleSidebar}
          className="group p-2 mr-6 text-slate-200 hover:text-[#c5a059] transition-all duration-700"
          aria-label="Toggle Navigation"
        >
          <i className={`fa-solid fa-arrow-left-long text-[8px] transition-transform duration-700 ${!isSidebarOpen ? 'rotate-180' : ''}`}></i>
        </button>
        <div className="flex flex-col">
          <span className="text-[5.5px] font-bold uppercase tracking-[0.5em] text-[#c5a059]/60 mb-0.5 font-serif italic">Archive Ledger</span>
          <h2 className="font-serif italic text-base text-slate-900 leading-none">
            Bonjour, <span className="not-italic font-light tracking-tight">{userData.name}</span>
          </h2>
        </div>
      </div>

      <div className="flex items-center space-x-10">
        <div className="hidden lg:flex items-center space-x-8">
          <div className="text-right">
            <p className="text-[5.5px] font-bold uppercase tracking-[0.3em] text-slate-300 mb-0.5">Bureau</p>
            <p className="text-[7.5px] font-medium uppercase tracking-[0.1em] text-slate-800 font-serif italic">{userData.location}</p>
          </div>
          <div className="w-[0.5px] h-4 bg-[#c5a059]/10"></div>
          <div className="text-right">
            <p className="text-[5.5px] font-bold uppercase tracking-[0.3em] text-slate-300 mb-0.5">Climat</p>
            <p className="text-[7.5px] font-medium uppercase tracking-[0.1em] text-slate-800 font-serif italic">{userData.weather}</p>
          </div>
          <div className="w-[0.5px] h-4 bg-[#c5a059]/10"></div>
          <div className="text-right">
            <p className="text-[5.5px] font-bold uppercase tracking-[0.3em] text-slate-300 mb-0.5">Date d'édition</p>
            <p className="text-[7.5px] font-medium uppercase tracking-[0.1em] text-slate-800 font-serif italic">{userData.date}</p>
          </div>
        </div>

        <div className="flex items-center space-x-4 pl-4 border-l border-[#c5a059]/5">
          <button className="text-slate-200 hover:text-slate-900 transition-colors">
            <i className="fa-solid fa-magnifying-glass text-[8px]"></i>
          </button>
          <div className="w-7 h-7 rounded-full overflow-hidden grayscale hover:grayscale-0 transition-all duration-1000 border border-[#c5a059]/10 p-[1px]">
            <img src="https://picsum.photos/seed/curator/100/100" alt="Avatar" className="w-full h-full object-cover rounded-full" />
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;