import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { MessageBar } from './MessageBar';

const meta: Meta<typeof MessageBar> = {
  title: 'Other Components/MessageBar',
  component: MessageBar,
  args: {
    title: 'Message',
  },
  argTypes: {
    children: {
      control: {
        type: 'text',
      },
    },
  },
};
export default meta;

// Action mapping needed?

export const Default: StoryObj<typeof MessageBar> = {
  args: {
    title: 'Message',
    onClose: undefined,
    onRetry: undefined,
  },
};

export const WithRetryAndClose: StoryObj<typeof MessageBar> = {
  args: {
    title: 'Message',
  },
};

export const ComplexChild: StoryObj<typeof MessageBar> = {
  argTypes: {
    children: {
      control: false,
    },
  },
  args: {
    ...Default.args,
    children: (
      <ul>
        <li>Item: One</li>
        <li>Item: Two</li>
        <li>Item: Three</li>
        <li>Item: Four</li>
        <li>Item: Five</li>
      </ul>
    ),
  },
  parameters: {
    docs: {
      description: {
        story: `The MessageBar will render children in the drop down body.`,
      },
    },
  },
};
