use leptos::{IntoView, component, view};

use crate::{
    api::get_products,
    components::{async_fetch::AsyncFetch, container::Container, icon_p::IconP},
};

#[component]
pub fn ProductOverview() -> impl IntoView {
    view! {
        <Container
            header="Inventory"
            buttons=vec![
                (
                    view! { <IconP icon=icondata_io::IoClipboardOutline text="Inventory" /> },
                    "inventory",
                ),
                (view! { <IconP icon=icondata_io::IoPricetags text="Consume" /> }, "consume"),
                (view! { <IconP icon=icondata_io::IoStorefront text="Buy" /> }, "buy"),
            ]
        >
            {AsyncFetch!(
                fetcher = {get_products()}
                producer = |products| {
                  let products_num = products.len();
                  let plural_s = if products_num == 1 { "" } else { "s" };
                  let products_value = 2;
                  let products_currency = "EUR";

                  view! {
                      <p>
                          {format!(
                              "You have {products_num} product{plural_s} \
                                   in stock with a value \
                                   of {products_value} {products_currency}.",
                          )}
                      </p>
                  }
            }
            )}
        </Container>
    }
}