import gradio as gr

# Menu Data
menu_data = {
    "Tikka Murgh (Chicken)": {
        "price": "$16",
        "nutrition": "Calories: 220, Protein: 20g, Fat: 10g, Carbs: 5g",
        "portion": "250g",
        "image": "static/Tikka_Murgh_Chicken.png",
    },
    "Jhinga (Shrimp)": {
        "price": "$18",
        "nutrition": "Calories: 180, Protein: 25g, Fat: 8g, Carbs: 3g",
        "portion": "200g",
        "image": "static/Jhinga_Shrimp.jpg",
    },
    "Murgh Malai Kabob": {
        "price": "$17",
        "nutrition": "Calories: 240, Protein: 22g, Fat: 12g, Carbs: 7g",
        "portion": "300g",
        "image": "static/Murgh_Malai_Kabob.jpg",
    },
}

# Display Card Function
def display_card(item_name):
    data = menu_data[item_name]
    return f"""
    <div style="border:1px solid #ccc; padding:10px; border-radius:10px; width:300px; background-color:white;">
        <img src="{data['image']}" style="width:100%; border-radius:10px;" alt="{item_name}">
        <h3>{item_name} - {data['price']}</h3>
        <p>Nutrition: {data['nutrition']}</p>
        <p>Portion Size: {data['portion']}</p>
    </div>
    """

# Gradio Interface
with gr.Blocks() as app:
    gr.Markdown("### Indian & Chinese Restaurant Menu")
    with gr.Row():
        for item in menu_data.keys():
            gr.Button(item).click(
                display_card, inputs=[item], outputs=gr.HTML()
            )

app.launch()