"use client";

import type { SortOption } from "@/lib/products";
import { categories } from "@/data/categories";

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;
};

/** Linear atelier filters — no pills, no marketplace chrome. */
export function ShopToolbar({
  query,
  category,
  sort,
  inStock,
  onQuery,
  onCategory,
  onSort,
  onInStock,
}: Props) {
  const field =
    "h-10 w-full border border-border bg-[var(--paper)] px-3 text-sm outline-none transition focus:border-foreground";

  return (
    <div className="space-y-3 border border-border bg-[var(--paper)] p-3 sm:p-4">
      <input
        value={query}
        onChange={(event) => onQuery(event.target.value)}
        placeholder="Search tees, jeans, shirts…"
        className={field}
      />
      <div className="grid gap-2 sm:grid-cols-3">
        <select
          value={category}
          onChange={(event) => onCategory(event.target.value)}
          className={field}
        >
          <option value="all">All</option>
          <option value="women">Women</option>
          <option value="men">Men</option>
          {categories.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}
        >
          <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="flex h-10 items-center gap-2 border border-border bg-[var(--paper)] px-3 text-sm">
          <input
            type="checkbox"
            checked={inStock}
            onChange={(event) => onInStock(event.target.checked)}
            className="accent-[var(--accent)]"
          />
          In stock
        </label>
      </div>
    </div>
  );
}