"use client";

import { ShopFilterContent, type ShopFilterOptions } from "./ShopFilterContent";
import type { ShopFilterState } from "@/lib/shop/filterState";

/**
 * Filter sidebar: desktop only (hidden md:hidden lg:block), left column, sticky.
 * When filterOptions/filterState/onFilterChange are provided, renders ShopFilterContent;
 * otherwise renders children (e.g. sub-category links).
 */
export function ShopFilterSidebar({
  className,
  filterOptions,
  filterState,
  onFilterChange,
  filterOptionsLoading,
}: {
  children?: React.ReactNode;
  className?: string;
  filterOptions?: ShopFilterOptions | null;
  filterState?: ShopFilterState;
  onFilterChange?: (state: ShopFilterState) => void;
  filterOptionsLoading?: boolean;
}) {
  const showFilterContent =
    filterOptions !== undefined &&
    filterState !== undefined &&
    onFilterChange !== undefined;

  return (
    <aside
      className={`hidden md:hidden lg:block w-64 shrink-0 lg:self-start ${className ?? ""}`}
      aria-label="Filters"
    >
      <div className="sticky top-4 max-h-[calc(100vh-2rem)] overflow-y-auto rounded-lg border border-[var(--border)] bg-[var(--surface)] p-4 flex flex-col gap-6">
        {showFilterContent && (
          <ShopFilterContent
            options={filterOptions}
            value={filterState}
            onChange={onFilterChange}
            isLoading={filterOptionsLoading}
          />
        )}
      </div>
    </aside>
  );
}
