'use client';
import { Search } from 'lucide-react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { useOpenSearch } from './search-context';

/** Header search field look-alike (button) — desktop shows the ⌘K hint, mobile an icon button. */
export function SearchTrigger({ variant = 'field', className }: { variant?: 'field' | 'icon' | 'hero'; className?: string }) {
  const open = useOpenSearch();
  if (variant === 'icon') {
    return (
      <button type="button" onClick={open} className={cn('tap grid place-items-center rounded-sm text-ink-2 hover:bg-surface-2 hover:text-ink', className)} aria-label={t('search.open')}>
        <Search size={18} aria-hidden />
      </button>
    );
  }
  if (variant === 'hero') {
    return (
      <button type="button" onClick={open} className={cn('flex h-12 w-full items-center gap-3 rounded-md border border-rule-strong bg-surface px-4 text-left text-base text-ink-3 shadow-[0_1px_0_rgba(0,0,0,0.03)] hover:border-accent hover:text-ink-2', className)}>
        <Search size={18} aria-hidden className="text-ink-3" />
        <span className="flex-1 truncate">{t('search.placeholder')}</span>
        <kbd className="hidden rounded-xs border border-rule px-1.5 py-0.5 font-ui text-2xs text-ink-3 md:inline">{t('search.shortcut')}</kbd>
      </button>
    );
  }
  return (
    <button type="button" onClick={open} className={cn('flex h-9 w-44 items-center gap-2 rounded-sm border border-rule bg-surface px-2.5 text-left text-sm text-ink-3 hover:border-rule-strong hover:text-ink-2 xl:w-72', className)} aria-label={t('search.open')}>
      <Search size={15} aria-hidden />
      <span className="flex-1 truncate">{t('search.placeholder.short')}</span>
      <kbd className="rounded-xs border border-rule px-1 py-px font-ui text-2xs">{t('search.shortcut')}</kbd>
    </button>
  );
}