components/cards.py

from components.data import FOOD_DATA

def create_food_card(food_name):
    food_info = FOOD_DATA[food_name]
    image_src = f"assets/images/{food_info['image']}"
    nutrition = food_info["nutrition"]
    portion_size = food_info["portion_size"]

    # HTML for card
    card_html = f"""
    <div class="food-card">
        <div class="card-header">
            <img src="{image_src}" alt="{food_name}" class="food-image" />
            <button class="close-btn" onclick="document.querySelector('.food-card').style.display='none'">✖</button>
        </div>
        <div class="card-body">
            <h3>{food_name}</h3>
            <table class="nutrition-table">
                {"".join([f"<tr><td>{key}</td><td>{value}</td></tr>" for key, value in nutrition.items()])}
            </table>
        </div>
        <div class="card-footer">
            <p><strong>Portion Size:</strong> {portion_size}</p>
        </div>
    </div>
    """
    return card_html