import { Meta, StoryObj } from '@storybook/react-webpack5';

import CriticalCommsBanner from '.';
import { withVariantConfig } from '../../.storybook/helpers';

export default {
  component: CriticalCommsBanner,
  title: 'Prompts/CriticalCommsBanner/Tests',
  tags: ['!autodocs'],
} satisfies Meta<typeof CriticalCommsBanner>;

type Story = StoryObj<typeof CriticalCommsBanner>;

export const Sentiments: Story = {
  render: (args) => (
    <>
      <CriticalCommsBanner {...args} sentiment="negative" />
      <CriticalCommsBanner {...args} sentiment="warning" />
      <CriticalCommsBanner {...args} sentiment="neutral" />
    </>
  ),
  args: {
    subtitle: 'Add money within the next 30 days',
    action: { label: 'Take action', href: 'https://wise.com' },
    className: 'm-b-1',
  },
  ...withVariantConfig([
    'default',
    'dark',
    'bright-green',
    'forest-green',
    'business',
    'business--forest-green',
    'business--bright-green',
  ]),
};

export const RTL: Story = {
  render: (args) => (
    <>
      <CriticalCommsBanner {...args} sentiment="negative" />
      <CriticalCommsBanner {...args} sentiment="warning" />
      <CriticalCommsBanner {...args} sentiment="neutral" />
    </>
  ),
  args: {
    subtitle: 'Add money within the next 30 days',
    action: { label: 'Take action', href: 'https://wise.com' },
    className: 'm-b-1',
  },
  ...withVariantConfig(['rtl']),
};

export const Mobile: Story = {
  args: {
    subtitle: 'Add money within the next 30 days',
    action: { label: 'Take action', href: 'https://wise.com' },
    className: 'm-b-1',
  },
  ...withVariantConfig(['mobile']),
};

export const Zoom: Story = {
  args: {
    subtitle: 'Add money within the next 30 days',
    action: { label: 'Take action', href: 'https://wise.com' },
    className: 'm-b-1',
  },
  ...withVariantConfig(['400%']),
};

export const WithoutAction: Story = {
  render: (args) => (
    <>
      <CriticalCommsBanner {...args} sentiment="negative" />
      <CriticalCommsBanner {...args} sentiment="warning" />
      <CriticalCommsBanner {...args} sentiment="neutral" />
    </>
  ),
  args: {
    subtitle: 'Add money within the next 30 days',
    className: 'm-b-1',
  },
  ...withVariantConfig(['default']),
};