import { Story } from '@storybook/react';
import React from 'react';
import Alert, { AlertProps } from '../components/Alert/Alert';

export default {
  title: 'Components / Alert',
  component: Alert,
};

const Template: Story<AlertProps> = (args) => <Alert {...args} />;

export const Default = Template.bind({});
Default.args = {
  callback: () => {},
  children: <div>It's right here, Ray. It's looking at me.</div>,
  close: false,
  icon: undefined,
  id: 'default-alert',
  variant: 'default',
};

export const Close = Template.bind({});
Close.args = {
  callback: () => alert('Close clicked'),
  children: <div>It's right here, Ray. It's looking at me.</div>,
  close: true,
  icon: undefined,
  id: 'close-alert',
  variant: 'default',
};

export const Icon = Template.bind({});
Icon.args = {
  callback: () => {},
  children: <div>It's right here, Ray. It's looking at me.</div>,
  close: false,
  icon: 'fa-sharp fa-light fa-starship-freighter text-md',
  id: 'icon-alert',
  variant: 'default',
};

export const Error = Template.bind({});
Error.args = {
  callback: () => {},
  children: <div>It's right here, Ray. It's looking at me.</div>,
  close: false,
  icon: undefined,
  id: 'error-alert',
  variant: 'error',
};

export const Success = Template.bind({});
Success.args = {
  callback: () => {},
  children: <div>It's right here, Ray. It's looking at me.</div>,
  close: false,
  icon: undefined,
  id: 'success-alert',
  variant: 'success',
};

export const Info = Template.bind({});
Info.args = {
  callback: () => {},
  children: <div>It's right here, Ray. It's looking at me.</div>,
  close: false,
  icon: undefined,
  id: 'info-alert',
  variant: 'info',
};