/**
 * Search Toggle Component
 * 
 * Opens search page or modal
 */

'use client';

import Link from 'next/link';
import { useTranslations } from 'next-intl';

interface SearchToggleProps {
  locale: string;
}

export function SearchToggle({ locale }: SearchToggleProps) {
  const t = useTranslations('common');

  return (
    <Link
      href={`/${locale}/search`}
      className="flex items-center gap-2 px-3 py-1.5 text-sm text-muted hover:text-ink transition-colors"
      aria-label={t('search')}
    >
      <svg
        className="w-5 h-5"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
        />
      </svg>
      <span className="hidden lg:inline">{t('search')}</span>
    </Link>
  );
}