use jl_types::domain::{project::Project, media::Media};
use yew::prelude::*;
use yew_router::prelude::use_navigator;

use crate::routes::main_router::Route;


#[function_component(ProjectCard)]
pub fn project_card(props: &ProjectCardProps) -> Html {
    let navigator = use_navigator().unwrap();
    let project_id = props.project.id.clone();
    let project_view_cb = Callback::from(move |_|{
        navigator.push(&Route::Details { project_id });
    });
    let cover_image_url;
    if let Some(first_media) = props.project.media.media_list.get(0) {
        cover_image_url = match first_media {
            Media::Photo(url) => url.clone(),
            Media::Video(_) => String::new(),
        }
    } else {
        cover_image_url = String::new()
    }
    html!{
        <div class={"project-search-result-card"} onclick={project_view_cb}>
            <img src={cover_image_url} alt={"project image"} class={"project-search-result-card-picture"}/>
            
            <div class={"project-search-result-card-title"}>
                {"Suites by refa Piantini"}
            </div>
            <div class={"project-search-result-card-location"}>
                {"Apartamento en Piantini, Santo Domingo"}
            </div>
            <div class={"project-search-result-card-price"}>
                {"Desde RD$1,000,000.00"}
            </div>
            <div class={"project-search-result-card-details-container"}>
                <div class={"project-search-result-card-details-item"}>
                    <i class="fa-solid fa-ruler-vertical"></i>
                    <div>{"80-300m²"}</div>
                </div>
                <div class={"project-search-result-card-details-item"}>
                    <i class="fa-solid fa-hand-holding-hand"></i>
                    <div>{"Nuevo"}</div>
                </div>
                <div class={"project-search-result-card-details-item"}>
                    <i class="fa-regular fa-calendar-check"></i>
                    <div>{"8/2025"}</div>
                </div>
            </div>
        </div>
    }
}

#[derive(Properties, PartialEq, Eq, PartialOrd, Ord)]
pub struct ProjectCardProps {
    pub project: Project
}