'use client';

import { AuthButton } from '@/components/AuthButton';
import { HeaderControls } from './HeaderControls';
import { ThemeDropdown } from './ThemeDropdown';
import { useKeyboardShortcutsModal } from '@/contexts/KeyboardShortcutsContext';
import { Emoji } from '@/components/ui/Emoji';

interface HeaderDesktopProps {
  title: string;
  subtitle: string;
  syncing: boolean;
}

export function HeaderDesktop({ title, subtitle, syncing }: HeaderDesktopProps) {
  const { openModal: openShortcutsModal } = useKeyboardShortcutsModal();
  
  return (
    <div className="hidden lg:flex items-center justify-between gap-6">
      {/* Titre et status */}
      <div className="flex items-center gap-6">
        <div className="flex items-center gap-4 min-w-0">
          <div className={`w-3 h-3 rounded-full shadow-lg ${
            syncing 
              ? 'bg-yellow-400 animate-spin shadow-yellow-400/50' 
              : 'bg-cyan-400 animate-pulse shadow-cyan-400/50'
          }`}></div>
          <div className="min-w-0">
            <h1 className="text-xl xl:text-2xl font-mono font-bold text-[var(--foreground)] tracking-wider truncate">
              <span className="sm:hidden">{title}</span>
              <span className="hidden sm:inline">{title}</span>
            </h1>
            <p className="text-[var(--muted-foreground)] mt-1 font-mono text-xs sm:text-sm truncate">
              {subtitle}
            </p>
          </div>
        </div>

        {/* Navigation desktop */}
        <HeaderControls variant="desktop" />
      </div>

      {/* Contrôles à droite */}
      <div className="flex items-center gap-2">
        {/* Keyboard Shortcuts desktop */}
        <button
          onClick={openShortcutsModal}
          className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors p-1 rounded-md hover:bg-[var(--card-hover)]"
          title="Raccourcis clavier (Cmd+?)"
        >
          <Emoji emoji="⌨️" size={16} />
        </button>
        <ThemeDropdown variant="desktop" />
        <AuthButton />
      </div>
    </div>
  );
}