modcomms/frontend/components/AgencyFilterBar.tsx

import React, { useState, useEffect } from 'react';
import apiService from '../services/apiService';
import type { AgencyResponse } from '../services/apiService';
import { ChevronDownIcon } from './icons/ChevronDownIcon';

interface AgencyFilterBarProps {
    selectedAgencyId: string | null;
    onAgencyChange: (agencyId: string | null) => void;
}

export const AgencyFilterBar: React.FC<AgencyFilterBarProps> = ({ selectedAgencyId, onAgencyChange }) => {
    const [agencies, setAgencies] = useState<AgencyResponse[]>([]);

    useEffect(() => {
        const loadAgencies = async () => {
            try {
                const data = await apiService.getAgencies();
                setAgencies(data);
            } catch (err) {
                console.error('Failed to load agencies for filter:', err);
            }
        };
        loadAgencies();
    }, []);

    return (
        <div className="bg-white border-b border-grey-300 px-6 py-3 flex items-center gap-3 flex-shrink-0">
            <label className="text-sm font-medium text-oliver-black whitespace-nowrap">
                Filter by Agency:
            </label>
            <div className="relative max-w-xs">
                <select
                    value={selectedAgencyId || ''}
                    onChange={(e) => onAgencyChange(e.target.value || null)}
                    className="bg-white border-2 border-oliver-azure text-oliver-black py-1.5 pl-3 pr-8 rounded-[10px] text-sm focus:outline-none focus:ring-2 focus:ring-oliver-azure appearance-none min-w-[200px]"
                >
                    <option value="">All Agencies</option>
                    {agencies.map(a => (
                        <option key={a.id} value={a.id}>{a.name}</option>
                    ))}
                </select>
                <ChevronDownIcon className="absolute right-2 top-1/2 -translate-y-1/2 h-3 w-3 text-oliver-azure pointer-events-none" />
            </div>
        </div>
    );
};