`components/SearchBar.tsx`

65 lines
'use client'

import { useState, useEffect } from 'react'

interface SearchBarProps {
  onSearch: (query: string) => void
  initialQuery?: string
  placeholder?: string
  showSearchButton?: boolean
}

export default function SearchBar({
  onSearch,
  initialQuery = '',
  placeholder = 'Search for wines by name, vintage, or region...',
  showSearchButton = true
}: SearchBarProps) {
  const [query, setQuery] = useState(initialQuery)

  useEffect(() => {
    setQuery(initialQuery)
  }, [initialQuery])

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (query.trim()) {
      onSearch(query.trim())
    }
  }

  return (
    <form onSubmit={handleSubmit} className="w-full">
      <div className="flex gap-2">
        <div className="relative flex-1">
          <input
            type="text"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder={placeholder}
            className="w-full px-6 py-4 text-lg rounded-full border-2 border-white/30 bg-white/10 backdrop-blur-sm focus:border-white focus:outline-none focus:ring-4 focus:ring-white/30 text-white placeholder-white/70 transition-all"
            style={{ fontSize: '16px' }} // Prevent iOS zoom
            aria-label="Wine search input"
          />
          {/* Search Icon */}
          <div className="absolute right-4 top-1/2 -translate-y-1/2 text-white/70 pointer-events-none">
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
        </div>
        {showSearchButton && (
          <button
            type="submit"
            className="px-8 py-4 bg-gradient-to-r from-gold-400 to-gold-600 text-white font-bold rounded-full hover:from-gold-500 hover:to-gold-700 transition-all duration-300 hover:shadow-gold transform hover:scale-105 whitespace-nowrap min-h-[44px]"
            aria-label="Search wines"
          >
            <span className="hidden sm:inline">Search</span>
            <span className="sm:hidden">🔍</span>
          </button>
        )}
      </div>
    </form>
  )
}