import Header from './Header';

export default {
  component: Header,
  title: 'Typography/Header',
};

export const Basic = () => {
  return <Header title="Header title" />;
};

export const WithAction = () => {
  return (
    <Header
      title="Header title"
      action={{
        'aria-label': 'Magic',
        text: 'Click me!',
        onClick: () => alert('Action!'),
      }}
    />
  );
};

export const WithActionAsLink = () => {
  return (
    <Header
      title="Header title"
      action={{
        text: 'This is a link',
        href: 'https://wise.com',
      }}
    />
  );
};

export const WithActionAsLinkPreventingNavigationWithTracking = () => {
  return (
    <Header
      title="Header title"
      action={{
        text: 'This is a link',
        href: 'https://wise.com',
        onClick: (event: React.MouseEvent<HTMLElement>) => {
          alert('Running onClick handler');

          // we can stop the navigation from happening as onClick will always run before href redirect
          event.preventDefault();
        },
      }}
    />
  );
};
