use uuid::Uuid;
use yew::prelude::*;
use yew_router::prelude::use_navigator;

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


#[function_component(ProjectCard)]
pub fn project_card() -> Html {
    let navigator = use_navigator().unwrap();

    let project_view_cb = Callback::from(move |_|{
        navigator.push(&Route::Details { property_id: Uuid::default() });
    });
    html!{
        <div class={"project-search-result-card"} onclick={project_view_cb}>
            <img src={"https://refa.com.do/uploads/posiv.jpg"} 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>
    }
}