import {
  Bluesky,
  Discord,
  GitHub,
  LinkedIn,
  Mastodon,
  Slack,
  X,
} from '#ui/Icons/Social';

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

const socialIcons = [
  [GitHub, Mastodon, LinkedIn],
  [Slack, X, Bluesky],
  [Discord],
];

export const SocialMediaLogos: StoryObj = {
  render: () => (
    <div className="flex flex-row gap-4">
      {socialIcons.map(group => (
        <div
          key={group.map(i => i.name || i.displayName).join()}
          className="flex flex-col items-center gap-4"
        >
          {group.map(Icon => (
            <Icon key={Icon.name || Icon.displayName} width={64} height={64} />
          ))}
        </div>
      ))}
    </div>
  ),
};

export default { title: 'Design System' } as MetaObj;
