'use client';

import { Menu } from 'lucide-react';
import { format } from 'date-fns';
import { es } from 'date-fns/locale';
import { Logo } from './Logo';

interface HeaderProps {
  onMenuClick: () => void;
  title: string;
}

export function Header({ onMenuClick, title }: HeaderProps) {
  const currentDate = format(new Date(), "EEEE, d 'de' MMMM 'de' yyyy", {
    locale: es,
  });

  // Capitalizar primera letra
  const formattedDate =
    currentDate.charAt(0).toUpperCase() + currentDate.slice(1);

  return (
    <header className="sticky top-0 z-30 bg-slate-900/95 backdrop-blur-sm border-b border-slate-800">
      <div className="flex items-center justify-between h-16 px-4 md:px-6">
        {/* Left section */}
        <div className="flex items-center gap-4">
          <button
            onClick={onMenuClick}
            className="lg:hidden p-2 -ml-2 text-slate-400 hover:text-slate-200 hover:bg-slate-800 rounded-lg transition-colors"
            aria-label="Abrir menú"
          >
            <Menu className="w-6 h-6" />
          </button>

          <div className="flex items-center gap-3">
            <div className="lg:hidden">
              <Logo size="sm" showText={false} />
            </div>
            <h1 className="text-lg md:text-xl font-semibold text-slate-100">
              {title}
            </h1>
          </div>
        </div>

        {/* Right section */}
        <div className="flex items-center gap-4">
          <div className="hidden md:flex items-center gap-2">
            <Logo size="sm" showText />
          </div>
          <time className="text-sm text-slate-400 hidden sm:block">
            {formattedDate}
          </time>
        </div>
      </div>
    </header>
  );
}