src/components/FilterBar.tsx

import { useMemo } from "react";
import conferencesData from "@/data/conferences.yml";
import { X } from "lucide-react";

interface FilterBarProps {
  selectedTag: string;
  onTagSelect: (tag: string) => void;
}

const FilterBar = ({ selectedTag, onTagSelect }: FilterBarProps) => {
  const uniqueTags = useMemo(() => {
    const tags = new Set<string>();
    if (Array.isArray(conferencesData)) {
      conferencesData.forEach(conf => {
        if (Array.isArray(conf.tags)) {
          conf.tags.forEach(tag => tags.add(tag));
        }
      });
    }
    return ["All", ...Array.from(tags)].map(tag => ({
      id: tag,
      label: tag.split("-").map(word => 
        word.charAt(0).toUpperCase() + word.slice(1)
      ).join(" "),
      description: tag === "All" ? "All Conferences" : `${tag} Conferences`
    }));
  }, []);

  return (
    <div className="w-full py-6 bg-white border-b border-neutral-200 animate-fade-in shadow-sm">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-wrap gap-3">
          {uniqueTags.map((filter) => (
            <button
              key={filter.id}
              title={filter.description}
              onClick={() => onTagSelect(filter.id)}
              className={`
                px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200
                filter-tag
                ${selectedTag === filter.id 
                  ? "bg-primary text-white shadow-sm filter-tag-active" 
                  : "bg-neutral-50 text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900"
                }
              `}
            >
              {filter.label}
            </button>
          ))}
          
          {selectedTag !== "All" && (
            <button
              onClick={() => onTagSelect("All")}
              className="px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200
                bg-red-50 text-red-600 hover:bg-red-100 hover:text-red-700
                flex items-center gap-2"
            >
              <X className="h-4 w-4" />
              Deselect All
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

export default FilterBar;