import React from 'react';
import { QuestionCircle } from 'react-bootstrap-icons';
import styled from 'styled-components';

import Currency from './Currency';
import Tooltip from './Tooltip';

const Wrapper = styled.a<{ image: string }>`
    background-image: url(${({ image }) => image});
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    min-height: 240px;
`;
const Overlay = styled.div`
    align-items: center;
    background: rgba(62, 68, 87, 0.6);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    height: 52px;
    width: 100%;
    padding: 0 12px;
`;
const Text = styled.div`
    color: #ffffff;
    margin: 0;
`;

function Product({ name, thumbnail, price, hasPrice }: Product) {
    return (
        <Wrapper image={thumbnail}>
            <Overlay>
                <Text>{name}</Text>
                <Text>
                    {hasPrice ? (
                        <Currency value={price} />
                    ) : (
                        <>
                            <QuestionCircle data-tip data-for="question" />
                            <Tooltip
                                delayHide={150}
                                clickable
                                effect="solid"
                                id="question"
                            >
                                O preço para este produto ainda está sendo
                                calculado.
                            </Tooltip>
                        </>
                    )}
                </Text>
            </Overlay>
        </Wrapper>
    );
}

export default Product;