CrazeAnalytix/components/FilterBar.tsx

import React from 'react';
import { FilterState } from '../types';
import MultiSelectDropdown from './MultiSelectDropdown';

interface FilterBarProps {
  filters: FilterState;
  onFilterChange: (key: keyof FilterState, value: string[]) => void;
  options: {
    customer: string[];
    year: string[];
    month: string[];
    line: string[];
    asin: string[];
    sku: string[];
    title: string[];
    week: string[];
  };
}

const FilterBar: React.FC<FilterBarProps> = ({ filters, onFilterChange, options }) => {
  return (
    <div className="bg-slate-950 border-b border-border sticky top-0 z-[60] p-4 shadow-xl">
      <div className="max-w-7xl mx-auto flex flex-wrap gap-4 items-end">
        <MultiSelectDropdown
          label="Customer"
          selected={filters.customer}
          options={options.customer}
          onChange={(v) => onFilterChange('customer', v)}
          className="flex-1"
        />
        <MultiSelectDropdown
          label="Year"
          selected={filters.year}
          options={options.year}
          onChange={(v) => onFilterChange('year', v)}
          className="flex-1"
        />
        <MultiSelectDropdown
          label="Month"
          selected={filters.month}
          options={options.month}
          onChange={(v) => onFilterChange('month', v)}
          className="flex-1"
        />
        <MultiSelectDropdown
          label="Week"
          selected={filters.week}
          options={options.week}
          onChange={(v) => onFilterChange('week', v)}
          className="flex-1"
          enableRangeSelect={true}
        />
        <MultiSelectDropdown
          label="Product Line"
          selected={filters.line}
          options={options.line}
          onChange={(v) => onFilterChange('line', v)}
          className="flex-1"
        />
        <MultiSelectDropdown
          label="SKU"
          selected={filters.sku}
          options={options.sku}
          onChange={(v) => onFilterChange('sku', v)}
          className="flex-1"
        />
        <MultiSelectDropdown
          label="Title"
          selected={filters.title}
          options={options.title}
          onChange={(v) => onFilterChange('title', v)}
          className="flex-1"
        />
        <MultiSelectDropdown
          label="ASIN"
          selected={filters.asin}
          options={options.asin}
          onChange={(v) => onFilterChange('asin', v)}
          className="flex-1"
        />
      </div>
    </div>
  );
};

export default FilterBar;