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

import Logo, { LogoType } from '.';
import { withVariantConfig } from '../../.storybook/helpers';

const meta: Meta<typeof Logo> = {
  component: Logo,
  tags: ['!autodocs', '!manifest'],
  title: 'Content/Logo/Tests',
};

export default meta;

type Story = StoryObj<typeof Logo>;

const AllVariants = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
    <div style={{ display: 'flex', gap: '2rem', alignItems: 'center' }}>
      {Object.values(LogoType).map((type) => (
        <Logo key={type} type={type} />
      ))}
    </div>
    <div
      style={{
        display: 'flex',
        gap: '2rem',
        alignItems: 'center',
        backgroundColor: 'var(--color-content-primary)',
        padding: '1rem',
        borderRadius: '8px',
      }}
    >
      {Object.values(LogoType).map((type) => (
        <Logo key={type} type={type} inverse />
      ))}
    </div>
  </div>
);

export const Variants: Story = {
  render: () => <AllVariants />,
  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
};

export const RTL: Story = {
  render: () => <AllVariants />,
  ...withVariantConfig(['rtl']),
};

export const Zoom400: Story = {
  render: () => <AllVariants />,
  ...withVariantConfig(['400%']),
};