'use client';

import { Menu, Search } from 'lucide-react';

type ProfileTopbarProps = {
  searchValue: string;
  onSearchValueChange: (value: string) => void;
  onOpenMobileMenu: () => void;
  searchPlaceholder?: string;
  showSearch?: boolean;
};

export default function ProfileTopbar({
  searchValue,
  onSearchValueChange,
  onOpenMobileMenu,
  searchPlaceholder,
  showSearch = true,
}: ProfileTopbarProps) {
  const placeholder = searchPlaceholder || 'Поиск ссылок, slug, тегов...';

  return (
    <header className="relative z-10 flex h-16 shrink-0 items-center justify-between gap-3 border-b border-white/10 bg-[#0A0A0A]/70 px-4 backdrop-blur-md md:px-8">
      <div className="flex h-9 w-9 items-center justify-start">
        <button
          type="button"
          onClick={onOpenMobileMenu}
          className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-white/[0.03] text-gray-400 transition-all duration-300 hover:bg-white/[0.08] hover:text-white lg:hidden"
          aria-label="Открыть меню"
        >
          <Menu className="h-4 w-4" />
        </button>
      </div>

      {showSearch ? (
        <div className="group relative max-w-xl flex-1">
          <div className="pointer-events-none absolute inset-0 rounded-lg bg-gradient-to-r from-violet-500/0 via-violet-500/0 to-fuchsia-500/0 opacity-0 blur-md transition-opacity duration-300 group-focus-within:opacity-60" />
          <label className="relative block">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
            <input
              type="text"
              value={searchValue}
              onChange={(event) => onSearchValueChange(event.target.value)}
              placeholder={placeholder}
              className="w-full rounded-lg border border-white/10 bg-white/[0.03] py-2 pl-10 pr-4 text-sm text-white outline-none transition-all duration-300 placeholder:text-gray-500 focus:border-violet-500/50 focus:bg-white/[0.05]"
            />
          </label>
        </div>
      ) : (
        <div className="flex-1" />
      )}

      <div className="w-9" />
    </header>
  );
}
