"use client";

import { useEffect, useState } from "react";
import { featuredMenu } from "./menu-data";

type Item = { id: number; name: string; price: string };
type Category = { items: Item[] };

export function MenuHighlights() {
  const [items, setItems] = useState<Item[]>([]);

  useEffect(() => {
    fetch("/api/menu")
      .then((response) => response.json())
      .then((data: { categories?: Category[] }) => {
        const allItems = (data.categories ?? []).flatMap((category) => category.items);
        setItems(
          featuredMenu
            .map((name) => allItems.find((item) => item.name === name))
            .filter((item): item is Item => Boolean(item))
        );
      })
      .catch(() => setItems([]));
  }, []);

  if (!items.length) return null;

  return (
    <div className="menu-highlights">
      {items.map((item) => (
        <span key={item.id}>
          <strong>{item.price}</strong>
          {item.name}
        </span>
      ))}
    </div>
  );
}