import gradio as gr

def reverse_text(text):
    if not text:
        return ""
    return text[::-1]

# Custom CSS for professional styling with pink submit button
custom_css = """
#component-0 {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.gradio-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

h1 {
    text-align: center;
    color: #1f2937;
    font-weight: 600;
    margin-bottom: 10px;
}

.contain {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

button.primary {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: 500 !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

button.primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4) !important;
}

.output-class {
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
}
"""

with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as app:
    gr.Markdown(
        """
        # Text Reverser
        ### Transform your text with a simple reverse operation
        Enter any text below and watch it get reversed instantly.
        """
    )
    
    with gr.Row():
        with gr.Column():
            input_text = gr.Textbox(
                label="Input Text",
                placeholder="Type or paste your text here...",
                lines=5,
                max_lines=10
            )
            
            submit_btn = gr.Button("Reverse Text", variant="primary", size="lg")
    
    with gr.Row():
        with gr.Column():
            output_text = gr.Textbox(
                label="Reversed Text",
                lines=5,
                max_lines=10,
                interactive=False,
                elem_classes=["output-class"]
            )
    
    # Connect the button to the function
    submit_btn.click(fn=reverse_text, inputs=input_text, outputs=output_text)
    
    # Also trigger on Enter key in the input
    input_text.submit(fn=reverse_text, inputs=input_text, outputs=output_text)
    
    gr.Markdown(
        """
        ---
        *Tip: Press Enter in the input field or click the button to reverse your text*
        """
    )

if __name__ == "__main__":
    app.launch()