"use client";

import type { SortOption } from "@/lib/products";
import { siloDepartments } from "@/data/silo-catalog";

type Props = {
  query: string;
  category: string;
  sort: SortOption;
  inStock: boolean;
  onQuery: (value: string) => void;
  onCategory: (value: string) => void;
  onSort: (value: SortOption) => void;
  onInStock: (value: boolean) => void;
};

/** Search, category, and sort filters for the marketplace shop. */
export function ShopToolbar({
  query,
  category,
  sort,
  inStock,
  onQuery,
  onCategory,
  onSort,
  onInStock,
}: Props) {
  return (
    <div className="space-y-4 border border-border bg-card/90 p-4 shadow-[0_12px_30px_rgba(10,10,10,0.03)] backdrop-blur sm:p-5">
      <input
        value={query}
        onChange={(event) => onQuery(event.target.value)}
        placeholder="Search oats, sausage, Silo Drops…"
        className="field-bin"
      />
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        <select
          value={category}
          onChange={(event) => onCategory(event.target.value)}
          className="field-bin"
        >
          <option value="all">All categories</option>
          {siloDepartments.map((item) => (
            <option key={item.slug} value={item.slug}>
              {item.name}
            </option>
          ))}
        </select>
        <select
          value={sort}
          onChange={(event) => onSort(event.target.value as SortOption)}
          className="field-bin"
        >
          <option value="featured">Featured</option>
          <option value="newest">Newest</option>
          <option value="price-asc">Price: Low to High</option>
          <option value="price-desc">Price: High to Low</option>
          <option value="rating">Top rated</option>
        </select>
        <label className="field-bin flex items-center gap-2">
          <input
            type="checkbox"
            checked={inStock}
            onChange={(event) => onInStock(event.target.checked)}
            className="accent-foreground"
          />
          In stock only
        </label>
      </div>
    </div>
  );
}