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"]

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