import * as React from 'react';
import Slider from 'react-slick';
import {navigate} from 'gatsby';
import {GatsbyImage} from 'gatsby-plugin-image';
import Badge from '../Badge/Badge';
import SocialMediaTooltips from "../SocialMediaTooltips/SocialMediaTooltips";

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import '../../styles/styles.scss';

const ProductCard = ({product, images}) => {
    const settings = {
        dots: false,
        infinite: false,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
    };

    const doClick = () => {
        navigate(`/insights/${product.name.replaceAll(' ', '-').toLowerCase()}`);
    };

    return (
        <div className="product-card m-b-48">
            <div className="product-card__slider">
                <Slider {...settings}>
                    {product.images.map((image, index) => (
                        <GatsbyImage
                            key={index}
                            image={images[index]?.gatsbyImageData}
                            alt={product.name}
                        />
                    ))}
                </Slider>
            </div>
            <div className="product-card__data">
                <h2 onClick={doClick}>{product.name}</h2>
                <p className="product-card__subtitle">Current Signal</p>
                {product.tags.split(",").map((tag) => (
                    <Badge tag={tag} key={tag}></Badge>
                ))}
                <div className="product-card__confidence-container"><SocialMediaTooltips product={product}/></div>
                <div className="product-card__information" onClick={doClick}>
                    i
                </div>
            </div>
        </div>
    );
};

export default ProductCard;
