import React from 'react';
import {
  InlineMessageContainer,
  InlineMessageHeader,
  InlineMessageIconWrapper,
  InlineMessageHeadline,
  InlineMessageBody,
  InlineMessageLink,
  PhoneNumberLink
} from './styles';

interface InlineMessageProps {
  headline: string;
  message: string;
  linkHref?: string;
  linkText?: React.ReactNode;
  phoneNumber?: string;
}

const OctagonWarningIcon: React.FC = () => (
  <svg
    width="21"
    height="21"
    viewBox="0 0 21 21"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
  >
    <path
      d="M21 6.14844V14.8516L14.8516 21H6.14844L0 14.8516V6.14844L6.14844 0H14.8516L21 6.14844ZM10.5 13.6504C9.66 13.6504 8.9834 14.327 8.9834 15.167C8.98357 16.0068 9.66011 16.6836 10.5 16.6836C11.3399 16.6836 12.0164 16.0068 12.0166 15.167C12.0166 14.327 11.34 13.6504 10.5 13.6504ZM9.33301 4.66699V11.667H11.667V4.66699H9.33301Z"
      fill="#CB0705"
    />
  </svg>
);

export const InlineMessage: React.FC<InlineMessageProps> = ({
  headline,
  message,
  linkHref,
  linkText,
  phoneNumber
}) => (
  <InlineMessageContainer role="alert" aria-live="assertive">
    <InlineMessageHeader>
      <InlineMessageIconWrapper>
        <OctagonWarningIcon />
      </InlineMessageIconWrapper>
      <InlineMessageHeadline>{headline}</InlineMessageHeadline>
    </InlineMessageHeader>
    <InlineMessageBody>
      {message}
      {phoneNumber && (
        <PhoneNumberLink href={`tel:${phoneNumber}`}>
          {' '}
          {phoneNumber}
        </PhoneNumberLink>
      )}
    </InlineMessageBody>
    {linkHref &&
      linkText && (
        <InlineMessageLink href={linkHref}>{linkText}</InlineMessageLink>
      )}
  </InlineMessageContainer>
);