import { TargetedOfferData } from '@nitrots/nitro-renderer';
import { Dispatch, SetStateAction } from 'react';
import { GetConfigurationValue } from '../../../../api';
import { LayoutNotificationBubbleView, Text } from '../../../../common';

export const OfferBubbleView = (props: { offer: TargetedOfferData, setOpen: Dispatch<SetStateAction<boolean>> }) =>
{
    const { offer = null, setOpen = null } = props;

    if(!offer) return;

    return <LayoutNotificationBubbleView fadesOut={ false } gap={ 2 } onClick={ evt => setOpen(true) } onClose={ null }>
        <div className="nitro-targeted-offer-icon" style={ { backgroundImage: `url(${ GetConfigurationValue('image.library.url') + offer.iconImageUrl })` } }/>
        <Text className="ubuntu-bold" variant="light">{ offer.title }</Text>
    </LayoutNotificationBubbleView>;
};