import React, { useState, useEffect } from "react"
import CardList from "./core/CardList"

interface Idata {
    layout?: "row" | "col" | "grid"
    size?: "xs" | "base" | "xl"
}

const Data = (props: Idata) => {
    const { layout = "row", size = "xs" } = props
    const [data, setData] = useState<any[]>([])

    useEffect(() => {
        setData([
            {
                name: "Action",
                description: "Action description for the Button",
                size: "xs",
            },
            {
                name: "Action",
                description: "Action description for the Button",
                size: "xs",
            },
            {
                name: "Action",
                description: "Action description for the Button",
                size: "xs",
            },
        ])
        // fetch(`${MAPS_URL}&start=0&limit=${limit}`)
        //     .then((res) => {
        //         if (!res.ok) {
        //             throw new Error(res.statusText)
        //         }

        //         return res.json()
        //     })
        //     .then((response) => {
        //         const results = response.results
        //         if (results.length) {
        //             setData(results)
        //         }
        //     })
        //     .catch((e) => {
        //         console.log(e)
        //     })
    }, [])

    if (!data.length) return null

    const dataCards = data.map((data: any) => {
        return {
            name: data.name,
            description: data.description,
            // image: `/geoportal/${data.thumbnail}`,
            size: size,
            // url: `/geoportal/#/context/Admin/${data.id}`,
        }
    })
    return (
        <div>
            <CardList cards={dataCards} layout={layout} />
        </div>
    )
}

export default Data