import React from 'react';
import { Box, Text } from '@nova-hf/ui';

import { ButtonProps } from '../Button/Button';
import { BaseWrapper, Button } from '../index';

type UpsellProps = {
  title: string;
  description: string;
  button?: ButtonProps;
};

const Upsell = ({ title, description, button }: UpsellProps) => {
  return (
    <Box marginY={2} width={{ sm: '100%', md: '50%' }} style={{ overflow: 'visible' }}>
      <BaseWrapper hasBackground allowOverflow={true}>
        <Box display="flex" flexDirection="column" alignItems="flex-start" gap={2}>
          <Box display="flex" flexDirection="row" justifyContent="space-between" width="100%">
            <Text variant={'pLargeBold'}>{title}</Text>
            <Box
              display="flex"
              alignItems="center"
              justifyContent="center"
              height="50%"
              width="50%"
              position="absolute"
              right={-5}
              top={-5}
            >
              <svg width="100" height="100" viewBox="0 0 100 100">
                <path
                  d="M 50 5 Q 70 15 85 25 Q 90 30 90 35 L 90 65 Q 90 70 85 75 Q 70 85 50 95 Q 30 85 15 75 Q 10 70 10 65 L 10 35 Q 10 30 15 25 Q 30 15 50 5 Z"
                  fill="#D3D3D3"
                  stroke="#D3D3D3"
                  strokeWidth="4"
                  strokeLinejoin="round"
                />
              </svg>
            </Box>
          </Box>
          <Box width="7/12">
            <Text color="grey700">{description}</Text>
          </Box>
          {button && (
            <Box width={{ sm: '8/12', lg: '6/12' }}>
              <Button {...button} />
            </Box>
          )}
        </Box>
      </BaseWrapper>
    </Box>
  );
};

export default Upsell;