import gradio as gr
from components.cards import create_food_card
from components.data import FOOD_DATA

# Function to render the popup card when an item is clicked
def display_card(food_name):
    return create_food_card(food_name)

# Gradio app interface
with gr.Blocks(css="styles.css") as app:
    gr.Markdown("# 🍽️ Indian & Chinese Food Nutritional Information App")
    gr.Markdown(
        """
        ### Explore Popular Dishes 🍛
        Click on any dish card below to view its image, nutritional facts, and portion size.
        """
    )

    # Display all items as clickable cards
    with gr.Row():
        for food_name in FOOD_DATA.keys():
            with gr.Column():
                # Each item card is a clickable button
                gr.Button(
                    value=food_name,
                    elem_id=f"food-{food_name.replace(' ', '-').lower()}",
                    interactive=True,
                ).click(display_card, inputs=None, outputs=gr.HTML())

    # Display area for the popup card
    display_area = gr.HTML()

# Launch the app
app.launch()