// styling
import styles from './styles.module.scss';
import ColorCard from "@components/ColorCards/ColorCard";
import React from "react";
import {SwiperSlide} from "swiper/react";
import {NavLink} from "react-router-dom";
import LazyImage from "@components/LazyImage";
const ColorCardsGrid = ({data}) => {
    data=[
        {
            link:'/casino',
            img:'/bigbgs/casino.png',
            icon:'icon_Casino',
            title:'links.casino',
            desc:'Dive into our in-house games, live casino and slots',
            background:"linear-gradient(180deg, rgba(98, 22, 233, .2) 0%, rgba(98, 22, 233, 0) 100%), #1C1E22;",
            background_blur:"#6216e9;",
            background_btn:"linear-gradient(91deg, #5617cb 0%, #8447f6 96.49%)",
        },
        {
            link:'/sports',
            img:'/bigbgs/sports.png',
            icon:'icon_Sports',
            title:'links.sports',
            desc:'Experience the thrill of horse racing and enjoy the winnings',
            background:"linear-gradient(180deg, rgba(23, 183, 69, .2) 0%, rgba(30, 130, 59, 0) 100%), #1C1E22;",
            background_blur:"#079234;",
            background_btn:"linear-gradient(91deg, #1e7d3a 0%, #2cae53 100%);",
        },
        {
            link:'/slots',
            img:'/bigbgs/racing.png',
            icon:'icon_Casino',
            title:'links.slots',
            desc:'Slots Games',
            background:"linear-gradient(180deg, rgba(196, 107, 2, .2) 0%, rgba(196, 107, 2, 0) 100%), #1C1E22;",
            background_blur:"#c46b02;",
            background_btn:"linear-gradient(91deg, #cc6504 0%, #eb9c53 100%);",
        },
        {
            link:'/table_game',
            img:'/bigbgs/trading.png',
            icon:'icon_Casino',
            title:'links.table_games',
            desc:'Table Games',
            background:"linear-gradient(180deg, rgba(217, 33, 33, .2) 0%, rgba(188, 34, 34, 0) 100%), #1C1E22;",
            background_blur:"#f42525;",
            background_btn:"linear-gradient(91deg, #438e15 0%, #51e61d 100%);",
        }
    ];
    if (data==null)data=[];
    return(
        <div className={styles.color_cards_grid}>
            {
                data.map((item, index) => (
                    <ColorCard data={item} key={index}></ColorCard>
                ))
            }
        </div>
    )
}

export default ColorCardsGrid
