import gradio as gr
from utils.helpers import load_content

def phonics_component():
    content = load_content()
    
    def practice_phonics(sound, user_input):
        for level in ["beginner", "intermediate"]:
            examples = next((p["examples"] for p in content["phonics"][level] 
                           if p["sound"] == sound), [])
            if examples:
                if user_input.lower().strip() in [ex.lower() for ex in examples]:
                    return "Correct! ✓"
                return f"Try again. Examples: {', '.join(examples)}"
        return "Sound not found"
    
    with gr.Column() as phonics:
        for level in ["beginner", "intermediate"]:
            with gr.Tab(f"{level.capitalize()} Phonics"):
                for phoneme in content["phonics"][level]:
                    with gr.Accordion(f"{phoneme['sound']} - {phoneme['pronunciation']}", open=False):
                        sound_input = gr.Textbox(value=phoneme["sound"], visible=False)
                        examples = gr.Markdown(", ".join(phoneme["examples"]))
                        user_input = gr.Textbox(label="Type a word with this sound")
                        check_btn = gr.Button("Check")
                        result = gr.Textbox(label="Result")
                        
                        check_btn.click(
                            fn=practice_phonics,
                            inputs=[sound_input, user_input],
                            outputs=result
                        )
    return phonics