/* eslint-disable react-hooks/rules-of-hooks */
import React from 'react';
import Banner from '.';
import { Stack } from '../Layout/index';
import TextLink from '../TextLink/index';

export default {
  title: 'Components|Banner',
  component: Banner,
};

export const index = () => {
  return (
    <Stack>
      <Banner intent="info">
        Initial PKS South East (Scaffolding) has some invoices that are long overdue.{' '}
        <TextLink>
          See collection options
        </TextLink>
      </Banner>
      <Banner intent="danger">
        Initial PKS South East (Scaffolding) has some invoices that are long overdue.{' '}
        <TextLink>
          See collection options
        </TextLink>
      </Banner>
      <Banner intent="warning">
        Initial PKS South East (Scaffolding) has some invoices that are long overdue.{' '}
        <TextLink>
          See collection options
        </TextLink>
      </Banner>
      <Banner>
        Initial PKS South East (Scaffolding) has some invoices that are long overdue.{' '}
      </Banner>
      <Banner backgroundColor="orange" borderColor="red" icon="email">
        Initial PKS South East (Scaffolding) has some invoices that are long overdue.{' '}
      </Banner>
      <Banner intent="danger" backgroundColor="yellow" borderColor="orange" icon="clock">
        Initial PKS South East (Scaffolding) has some invoices that are long overdue.{' '}
      </Banner>
      <Banner
        backgroundColor="Light Neutral 1"
        borderColor="transparent"
        icon={false}
      >
        <span style={{ marginRight: '10px' }} aria-label="star" role="img">⭐️</span>
        Tip: Add the payment portal placeholder in Templates to make sure the link is shared with your customers.
      </Banner>
    </Stack>
  );
};