'use client';

import { useState } from 'react';
import { ThemeDropdown } from './ThemeDropdown';
import { HeaderNavigation } from './HeaderNavigation';

interface HeaderControlsProps {
  variant: 'desktop' | 'mobile';
  className?: string;
}

export function HeaderControls({
  variant,
  className = '',
}: HeaderControlsProps) {
  const [tabletMenuOpen, setTabletMenuOpen] = useState(false);

  if (variant === 'mobile') {
    return (
      <div className={`flex items-center gap-2 flex-shrink-0 ${className}`}>
        {/* Theme Dropdown */}
        <ThemeDropdown variant="mobile" />
      </div>
    );
  }

  // Desktop version
  return (
    <div className={`flex items-center gap-2 ${className}`}>
      {/* Navigation */}
      <HeaderNavigation variant="desktop" />

      {/* Plus de navigation pour écrans moyens */}
      <div className="xl:hidden relative">
        <button
          onClick={() => setTabletMenuOpen(!tabletMenuOpen)}
          className="font-mono text-xs uppercase tracking-wider transition-colors px-2 py-1.5 rounded-md text-[var(--muted-foreground)] hover:text-[var(--primary)] hover:bg-[var(--card-hover)]"
          title="Plus de liens"
        >
          ⋯
        </button>

        {tabletMenuOpen && (
          <>
            {/* Backdrop */}
            <div
              className="fixed inset-0 z-[200]"
              onClick={() => setTabletMenuOpen(false)}
            />
            {/* Menu items */}
            <div className="absolute right-0 top-full mt-2 bg-[var(--card)] border border-[var(--border)] rounded-lg shadow-lg z-[201] py-2 min-w-[119px]">
              <HeaderNavigation
                variant="mobile"
                onLinkClick={() => setTabletMenuOpen(false)}
              />
            </div>
          </>
        )}
      </div>
    </div>
  );
}
