// styling
import styles from './styles.module.scss';
import symbol from "@assets/symbol-defs.svg";
import React from "react";
import {NavLink} from "react-router-dom";
import styled from 'styled-components/macro';
import LazyImage from "@components/LazyImage";
import {LazyLoadImage} from "react-lazy-load-image-component";
import symbol_m from "@assets/symbol-mobile.svg";
const i18n=global.i18n;
const ColorCard = ({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%)",
    // }

    const StyledNavLink=styled(NavLink)`
        background:${data.background};
    `;
    const StyledBlur=styled.div`
        background:${data.background_blur};
    `;
    const StyledGoBtn=styled.button`
        background-image:${data.background_btn};
    `
    return(
        <StyledNavLink className={styles.color_card_container} to={data.link}>
            <StyledBlur className={styles.card_blur}></StyledBlur>
            <div className={styles.card_mask}></div>
            <img src={data.img} className={styles.card_img}/>
            <div className={styles.card_content}>
                <div className={styles.card_content_header}>
                    <svg className={styles.icon}>
                        <use xlinkHref={`${symbol_m}#${data.icon}`} />
                    </svg>
                    <div className={styles.title}>
                        {i18n.t(data.title)}
                    </div>
                </div>
                <div className={styles.desc}>
                    {data.desc}
                </div>
                <StyledGoBtn className={styles.go_btn}>
                    <div className={styles.btn_inner}>{`${i18n.t('color_card.go_to')}${i18n.t(data.title)}`}</div>
                </StyledGoBtn>
            </div>
        </StyledNavLink>
    )
}

export default ColorCard
