# app.py
import gradio as gr

# Data for the menu
menu = [
    {
        "name": "Roti",
        "image": "https://via.placeholder.com/150?text=Roti",
        "nutrition": "Calories: 70 | Protein: 2g | Carbs: 15g"
    },
    {
        "name": "Paneer Butter Masala",
        "image": "https://via.placeholder.com/150?text=Paneer+Butter+Masala",
        "nutrition": "Calories: 450 | Protein: 15g | Carbs: 20g | Fat: 35g"
    },
    {
        "name": "Chicken Curry",
        "image": "https://via.placeholder.com/150?text=Chicken+Curry",
        "nutrition": "Calories: 300 | Protein: 25g | Carbs: 5g | Fat: 20g"
    },
    {
        "name": "Vegetable Biryani",
        "image": "https://via.placeholder.com/150?text=Vegetable+Biryani",
        "nutrition": "Calories: 250 | Protein: 5g | Carbs: 45g | Fat: 5g"
    },
]

def display_menu():
    """Generate HTML for menu items with hover effects."""
    html_content = """
    <style>
        .menu-item {
            display: inline-block;
            margin: 20px;
            text-align: center;
            position: relative;
        }
        .menu-item img {
            width: 150px;
            height: 150px;
            border-radius: 10px;
            transition: transform 0.2s;
        }
        .menu-item img:hover {
            transform: scale(1.1);
        }
        .menu-item .nutrition {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            visibility: hidden;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 12px;
            white-space: nowrap;
        }
        .menu-item:hover .nutrition {
            visibility: visible;
        }
    </style>
    <div>
    """
    for item in menu:
        html_content += f"""
        <div class="menu-item">
            <img src="{item['image']}" alt="{item['name']}">
            <p>{item['name']}</p>
            <div class="nutrition">{item['nutrition']}</div>
        </div>
        """
    html_content += "</div>"
    return html_content

with gr.Blocks() as demo:
    gr.Markdown("# Welcome to Our Food Menu")
    gr.Markdown(display_menu(), elem_id="menu-display")  # Removed interactive=False

demo.launch()