# mobile_components.py
import gradio as gr

class MobileComponents:
    """
    Mobile-specific UI components and utilities
    """
    
    @staticmethod
    def create_touch_friendly_button(text, icon=None, variant="secondary", size="sm"):
        return gr.Button(
            value=f"{icon} {text}" if icon else text,
            variant=variant,
            size=size,
            min_width=44,
            min_height=44
        )
    
    @staticmethod
    def create_mobile_textarea(placeholder, max_lines=3, **kwargs):
        return gr.Textbox(
            placeholder=placeholder,
            max_lines=max_lines,
            show_label=False,
            container=False,
            **kwargs
        )
    
    @staticmethod
    def mobile_loading_indicator():
        return gr.HTML("""
        <div class="loading-indicator">
            <div style="display: flex; align-items: center; gap: 10px;">
                <div class="spinner" style="
                    width: 20px;
                    height: 20px;
                    border: 2px solid #f3f3f3;
                    border-top: 2px solid #3498db;
                    border-radius: 50%;
                    animation: spin 1s linear infinite;
                "></div>
                <span>Processing...</span>
            </div>
            <style>
                @keyframes spin {
                    0% { transform: rotate(0deg); }
                    100% { transform: rotate(360deg); }
                }
            </style>
        </div>
        """)