import { FolderOpen, Clock, Pin, Search, X } from 'lucide-react';
import type { Tab, UseFileBrowserWidgetType } from '../useFileBrowserWidget';

const TABS: { key: Tab; label: string; icon: typeof FolderOpen }[] = [
  { key: 'browse', label: 'Browse', icon: FolderOpen },
  { key: 'recent', label: 'Recent', icon: Clock },
  { key: 'pinned', label: 'Pinned', icon: Pin },
];

type HeaderProps = {
  fileBrowserManager: UseFileBrowserWidgetType;
};

export const Header = ({ fileBrowserManager }: HeaderProps) => {
  const { tab, setTab, isSearching, searchQuery, setSearchQuery } = fileBrowserManager;

  return (
    <div className="flex items-center gap-2 px-4 pb-1">
      <div className="flex items-center gap-1">
        {TABS.map(({ key, label, icon: Icon }) => (
          <button
            key={key}
            onClick={() => setTab(key)}
            className={`flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors cursor-pointer ${
              !isSearching && tab === key
                ? 'bg-duck-teal/10 text-duck-teal'
                : 'text-duck-dark/50 hover:text-duck-dark/70 hover:bg-duck-dark/5'
            }`}
          >
            <Icon className="h-3.5 w-3.5" />
            {label}
          </button>
        ))}
      </div>
      <div className="relative ml-auto w-28 md:w-44">
        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-duck-dark/30" />
        <input
          type="text"
          value={searchQuery}
          onChange={(ev) => setSearchQuery(ev.target.value)}
          placeholder="Search..."
          className="w-full rounded-lg border border-duck-dark/20 bg-background pl-8 pr-8 py-1 text-xs text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-2 focus:ring-duck-teal/30 focus:border-duck-teal/50"
        />
        {searchQuery && (
          <button
            onClick={() => setSearchQuery('')}
            className="absolute right-2 top-1/2 -translate-y-1/2 text-duck-dark/30 hover:text-duck-dark/60 cursor-pointer"
          >
            <X className="h-3.5 w-3.5" />
          </button>
        )}
      </div>
    </div>
  );
};
