import ProText from "components/ProText";
import { useTranslation } from "react-i18next";
import { Product } from "utils/types/appTypes";
import styles from "../MenuList/MenuList.module.css";
import ProductCard from "../MenuList/ProductCard";

interface MenuListProps {
  products: Product[];
}

export function SearchMenu({ products }: MenuListProps) {
  const { t } = useTranslation();

  // Show error state if data exists but has no products
  if (products && (!products || products.length === 0)) {
    return (
      <div
        className={styles.menuSections}
        style={{ padding: "40px", textAlign: "center" }}
      >
        <ProText type="secondary">{t("menu.noMenuItemsAvailable")}</ProText>
      </div>
    );
  }

  return (
    <>
      <div className={styles.menuSections}>
        <div className={styles.menuItemsGrid}>
          {products.map((item: Product) => (
            <ProductCard item={item} key={item.id} />
          ))}
        </div>
      </div>
    </>
  );
}