import { Moon, Sun, BookOpen } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { SearchBar } from '@/components/SearchBar';
import { useTheme } from '@/hooks/useTheme';

interface HeaderProps {
  totalSkills: number;
  filteredCount: number;
  query: string;
  onQueryChange: (value: string) => void;
}

export function Header({ totalSkills, filteredCount, query, onQueryChange }: HeaderProps) {
  const { isDark, toggleTheme } = useTheme();

  return (
    <header className="sticky top-0 z-50 shrink-0 h-[var(--nav-height)] border-b border-border/60 bg-background/95 backdrop-blur-md supports-[backdrop-filter]:bg-background/80">
      <div className="mx-auto flex h-full max-w-[1680px] items-center gap-2 px-3 sm:gap-3 sm:px-6 lg:px-8">
        <a
          href="/"
          className="flex shrink-0 items-center gap-2 cursor-pointer"
          aria-label="MioKit home"
        >
          <div className="flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground">
            <BookOpen className="h-3.5 w-3.5" />
          </div>
          <span className="hidden sm:inline text-sm font-semibold text-foreground">MioKit</span>
        </a>

        <div className="h-4 w-px shrink-0 bg-border/60 hidden sm:block" aria-hidden />

        <SearchBar
          value={query}
          onChange={onQueryChange}
          compact
          className="min-w-0 flex-1 max-w-xl mx-auto"
        />

        <div className="flex shrink-0 items-center gap-2">
          <span
            className="hidden md:inline-flex items-center rounded-md border border-border/60 bg-muted/40 px-2 py-0.5 text-[10px] font-mono text-muted-foreground tabular-nums"
            title="Filtered / total skills"
          >
            <span className="text-foreground font-medium">{filteredCount}</span>
            <span className="mx-1 opacity-50">/</span>
            <span>{totalSkills}</span>
          </span>

          <Button
            variant="outline"
            size="icon"
            className="h-7 w-7 shrink-0 border-border/60 cursor-pointer"
            onClick={toggleTheme}
            aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
          >
            {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
          </Button>
        </div>
      </div>
    </header>
  );
}