---
import Layout from "../../layouts/Layout.astro";
import {Productos, Resultado} from "../../models/Productos.models"
import productList from "../../components/Tarjeta"
import React from "react";
import { http } from "../../services";
import type { DefaultResponse } from "../../types/responses";
import TarjetaAPI from "../../components/TarjetaAPI.astro";

/*const contenido: DefaultResponse<Productos []> = await http.get<Productos []>(
"https://pos.api.turquessacoffee.com/admin/test-productos/productos",
false
);*/

const resp = await fetch("https://pos.api.turquessacoffee.com/admin/test-productos/productos");
const data = (await resp.json()) as Productos;


//const ListadoProductos = contenido.resultado;
//const paginacion = contenido.paginacion?.total;
---


<Layout title="Productos" client:load>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    {data.resultado.map((producto) => (
      <TarjetaAPI
        nombre={producto.nombre}
        precio={producto.precio}
  
      />
    ))}
  </div>
</Layout>