`src/components/FilterBar.tsx`

108 lines
'use client'

import { BrandModelDropdowns } from './BrandModelDropdowns'
import { getAllBrands } from '@/data/handbag-catalog'

interface FilterBarProps {
  filters: any
  onChange: (filters: any) => void
}

export function FilterBar({ filters, onChange }: FilterBarProps) {
  const allBrands = getAllBrands()
  const topBrands = ['HERMÈS', 'CHANEL', 'LOUIS VUITTON', 'DIOR', 'GOYARD', 'PRADA']
  const sortOptions = [
    { value: 'deal', label: 'Best Deal' },
    { value: 'price-low', label: 'Price: Low to High' },
    { value: 'price-high', label: 'Price: High to Low' },
    { value: 'date', label: 'Recently Added' },
  ]

  return (
    <div className="mb-6 space-y-4">
      {/* Mobile Filter Pills - Top Brands */}
      <div className="flex overflow-x-auto space-x-2 pb-2 md:hidden">
        {topBrands.map((brand) => (
          <button
            key={brand}
            onClick={() => onChange({ ...filters, brand: filters.brand === brand ? '' : brand, model: '' })}
            className={`px-4 py-2 rounded-full whitespace-nowrap text-sm font-medium transition-all ${
              filters.brand === brand
                ? 'bg-purple-600 text-white'
                : 'bg-white text-gray-700 border border-gray-300'
            }`}
          >
            {brand}
          </button>
        ))}
      </div>

      {/* Brand & Model Dropdowns with Autocomplete */}
      <BrandModelDropdowns
        selectedBrand={filters.brand || ''}
        selectedModel={filters.model || ''}
        onBrandChange={(brand) => onChange({ ...filters, brand, model: '' })}
        onModelChange={(model) => onChange({ ...filters, model })}
      />

      {/* Price & Sort Filters */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">

        <input
          type="number"
          value={filters.minPrice}
          onChange={(e) => onChange({ ...filters, minPrice: e.target.value })}
          placeholder="Min Price (USD)"
          className="px-4 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
          style={{ fontSize: '16px' }}
        />

        <input
          type="number"
          value={filters.maxPrice}
          onChange={(e) => onChange({ ...filters, maxPrice: e.target.value })}
          placeholder="Max Price (USD)"
          className="px-4 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
          style={{ fontSize: '16px' }}
        />

        <select
          value={filters.sort}
          onChange={(e) => onChange({ ...filters, sort: e.target.value })}
          className="px-4 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
          style={{ fontSize: '16px' }}
        >
          {sortOptions.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>

        <label className="flex items-center space-x-2 px-4 py-2 bg-white border border-gray-300 rounded-lg cursor-pointer">
          <input
            type="checkbox"
            checked={filters.dealOnly}
            onChange={(e) => onChange({ ...filters, dealOnly: e.target.checked })}
            className="w-4 h-4 text-purple-600 rounded focus:ring-purple-500"
          />
          <span className="text-sm font-medium text-gray-700">Deals Only</span>
        </label>
      </div>

      {/* New Listings Toggle */}
      <div className="flex items-center space-x-4">
        <label className="flex items-center space-x-2 px-4 py-2 bg-gradient-to-r from-emerald-50 to-green-50 border-2 border-emerald-300 rounded-lg cursor-pointer">
          <input
            type="checkbox"
            checked={filters.showNew}
            onChange={(e) => onChange({ ...filters, showNew: e.target.checked })}
            className="w-4 h-4 text-emerald-600 rounded focus:ring-emerald-500"
          />
          <span className="text-sm font-bold text-emerald-700">✨ New Arrivals Only</span>
        </label>
      </div>
    </div>
  )
}