import { Alert as DangerIcon, AlertCircleFill } from '@transferwise/icons';
import { useTheme } from '@wise/components-theming';
import { clsx } from 'clsx';

import Avatar, { AvatarType } from '../avatar';
import Body from '../body';
import Button from '../button';
import { ControlType, Priority, Size, Typography } from '../common';
import Title from '../title';

export type CriticalCommsBannerProps = {
  title: string;
  subtitle?: string;
  action?: {
    label: string;
    href: string;
  };
  className?: string;
};

function CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {
  const { isModern } = useTheme();
  return (
    <div className={clsx('critical-comms', className)}>
      <div className="critical-comms-body">
        <Avatar
          size={Size.MEDIUM}
          type={AvatarType.ICON}
          className={clsx(isModern ? 'm-r-2' : 'm-r-1')}
          backgroundColor={
            isModern ? 'var(--color-sentiment-negative)' : 'var(--color-background-negative)'
          }
        >
          {isModern ? <AlertCircleFill /> : <DangerIcon size={24} />}
        </Avatar>
        <div className="critical-comms-content d-flex align-items-center flex-grow-1">
          <div className={clsx('flex-grow-1', { 'p-x-2': !isModern })}>
            <Title
              type={isModern ? Typography.TITLE_BODY : Typography.TITLE_GROUP}
              className="critical-comms--title"
            >
              {title}
            </Title>
            <Body className="critical-comms--subtitle">{subtitle}</Body>
          </div>
          {action ? (
            <div className="critical-comms--cta">
              <Button
                block={isModern}
                size={Size.SMALL}
                type={ControlType.NEGATIVE}
                priority={isModern ? Priority.SECONDARY : Priority.PRIMARY}
                className="cta-btn"
                onClick={() => {
                  if (action) {
                    window.location.href = action.href;
                  }
                }}
              >
                {action.label}
              </Button>
            </div>
          ) : null}
        </div>
      </div>
    </div>
  );
}

export default CriticalCommsBanner;
