import React from 'react';
import styled from 'styled-components';

import v from '../../styles/Variables';

interface Props {
  left?: string;
  top?: string;
  title: string;
  theme?: string;
}

const DiscountBadge = ({ left = '10px', top = '10px', title, theme }: Props) => (
  <BadgeStyles left={left} top={top} className={theme}>
    <span className="sr-only">{'Discount Amount'}</span>
    {title}
  </BadgeStyles>
);

export default DiscountBadge;

/* styles */
interface Styles {
  left: string;
  top: string;
}

const BadgeStyles = styled.span<Styles>`
  display: inline-block;
  position: absolute;
  font-size: 16px;
  color: ${v.colors.dark444};
  padding: 4px 20px;
  border-radius: 4px;
  border: 1px solid ${v.colors.border};
  white-space: nowrap;
  top: ${({ top }) => top};
  left: ${({ left }) => left};
`;