import React from 'react';
import { ToastProps } from './interfaces';
import { config as theme } from '../../theme';
import Typography from '../Typography';
import { RainbowTopBar, StyledToast, ToastBody } from './styles';

const Toast = (props: ToastProps) => (
  <StyledToast {...props} data-cy={props.dataCy} data-testid={props.dataTestId}>
    {props.showRainbowHeader && <RainbowTopBar />}
    {props.icon || <div />}

    <ToastBody>
      <Typography
        variant="utility1"
        fontWeight={500}
        margin={[0, 0, 4, 0]}
        color={
          props.variant === 'dark'
            ? theme.colors.neutral[0]
            : theme.colors.neutral[900]
        }
      >
        {props.title}
      </Typography>
      {props.subtitle && (
        <Typography
          variant="p1"
          color={
            props.variant === 'dark'
              ? theme.colors.neutral[200]
              : theme.colors.neutral[600]
          }
        >
          {props.subtitle}
        </Typography>
      )}
    </ToastBody>

    {props.button || <div />}
  </StyledToast>
);

export default Toast;