use yew::prelude::*;
use heromodels::models::library::items::Image;

#[derive(Clone, PartialEq, Properties)]
pub struct ImageViewerProps {
    pub image: Image,
    pub on_back: Callback<()>,
}

pub struct ImageViewer;

impl Component for ImageViewer {
    type Message = ();
    type Properties = ImageViewerProps;

    fn create(_ctx: &Context<Self>) -> Self {
        Self
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        let props = ctx.props();
        
        let back_handler = {
            let on_back = props.on_back.clone();
            Callback::from(move |_: MouseEvent| {
                on_back.emit(());
            })
        };

        html! {
            <div class="asset-viewer image-viewer">
                <button class="back-button" onclick={back_handler}>
                    <i class="fas fa-arrow-left"></i> {"Back to Collection"}
                </button>
                <div class="viewer-header">
                    <h2 class="viewer-title">{ &props.image.title }</h2>
                </div>
                <div class="viewer-content">
                    <img
                        src={props.image.url.clone()}
                        alt={props.image.title.clone()}
                        class="viewer-image"
                    />
                </div>
            </div>
        }
    }
}