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

import { Size, Sentiment } from '../common';

import StatusIcon from './StatusIcon';

export default {
  component: StatusIcon,
  title: 'Other/StatusIcon',
  tags: ['autodocs'],
  argTypes: {
    iconLabel: {
      control: 'text',
    },
  },
} satisfies Meta<typeof StatusIcon>;

type Story = StoryObj<typeof StatusIcon>;

export const Basic: Story = {};

/**
 * Ignored by the screen readers. Use with care.
 */
export const Presentational: Story = {
  args: {
    iconLabel: null,
  },
};

export const Variants: Story = {
  render: () => (
    <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
      {[
        Sentiment.POSITIVE,
        Sentiment.NEGATIVE,
        Sentiment.NEUTRAL,
        Sentiment.WARNING,
        Sentiment.PENDING,
      ].map((sentiment) => {
        return (
          <span
            key={sentiment}
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              flexDirection: 'column',
              minHeight: '150px',
              alignItems: 'center',
            }}
          >
            {([Size.SMALL, Size.MEDIUM, Size.LARGE] as const).map((size) => {
              return <StatusIcon key={size} size={size} sentiment={sentiment} />;
            })}
          </span>
        );
      })}
    </span>
  ),
};
