import AutoBanner from "@components/AutoBanner";
import {useThemeProvider} from "@contexts/themeContext";

// import { SpinePlayer } from '@esotericsoftware/spine-player';
import React from "react";
import ColorCard from "@components/ColorCards/ColorCard";
import ColorCardsGrid from "@components/ColorCards/ColorCardsGrid";

const Banner=({data})=>{
    const { isMobile } = useThemeProvider();
    
    const list=data.data?data.data:[];
    // const testdata=[
    //     {
    //         img:'http://localhost:3000/banner/1.png',
    //         alt:'1',
    //         link:'http://localhost:3000/'
    //     },
    //     {
    //         img:'http://localhost:3000/banner/2.png',
    //         alt:'2',
    //         link:'http://localhost:3000/'
    //     },
    //     {
    //         img:'http://localhost:3000/banner/3.png',
    //         alt:'3',
    //         link:'http://localhost:3000/'
    //     },
    //     {
    //         img:'http://localhost:3000/banner/4.png',
    //         alt:'4',
    //         link:'http://localhost:3000/'
    //     },
    //     {
    //         img:'http://localhost:3000/banner/1.png',
    //         alt:'1',
    //         link:'http://localhost:3000/'
    //     },
    //     {
    //         img:'http://localhost:3000/banner/2.png',
    //         alt:'2',
    //         link:'http://localhost:3000/'
    //     },
    //     {
    //         img:'http://localhost:3000/banner/3.png',
    //         alt:'3',
    //         link:'http://localhost:3000/'
    //     },
    //     {
    //         img:'http://localhost:3000/banner/4.png',
    //         alt:'4',
    //         link:'http://localhost:3000/'
    //     }
    // ];
    return (
        <div className={``}>
            <AutoBanner data={list}>

            </AutoBanner>
            {/*<Test></Test>*/}
        </div>
    )
}
export default Banner;
