import { useState } from 'react';
import MenuCategory from './MenuCategory';
import FilterBar from './FilterBar';
import { menuCategories, allCategories } from '../data/menuData';
import { type CategoryFilter } from '../types';

function Menu() {
  const [activeCategory, setActiveCategory] = useState<CategoryFilter>('all');

  const filteredCategories = activeCategory === 'all'
    ? menuCategories
    : menuCategories.filter((cat) => cat.name === activeCategory);

  return (
    <div className="max-w-6xl mx-auto px-4 py-8">
      <FilterBar
        categories={allCategories}
        activeCategory={activeCategory}
        onCategoryChange={setActiveCategory}
      />
      
      {filteredCategories.map((category) => (
        <MenuCategory key={category.name} category={category} />
      ))}
      
      {filteredCategories.length === 0 && (
        <div className="text-center text-gray-500 py-8">
          No items found in this category.
        </div>
      )}
    </div>
  );
}

export default Menu;
