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

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="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;