import type { Meta, StoryObj } from "@storybook/react";
import { SocialIcon } from "./SocialIcon";
import { SocialIconVariant } from "./types";

const meta: Meta<typeof SocialIcon> = {
  component: SocialIcon,
};

export default meta;

type Story = StoryObj<typeof SocialIcon>;

const argTypes = {
  variant: {
    options: Object.values(SocialIconVariant),
    control: { type: "select" },
  },
};

export const Primary: Story = {
  render: (args) => <SocialIcon {...args} />,
  args: {
    variant: SocialIconVariant.X,
  },
  argTypes,
  parameters: {
    themes: {
      themeOverride: "dark",
    },
  },
};

export const Discord: Story = {
  render: (args) => <SocialIcon {...args} />,
  args: {
    variant: SocialIconVariant.DISCORD,
  },
  argTypes,
  parameters: {
    themes: {
      themeOverride: "dark",
    },
  },
};

export const Telegram: Story = {
  render: (args) => <SocialIcon {...args} />,
  args: {
    variant: SocialIconVariant.TELEGRAM,
  },
  argTypes,
  parameters: {
    themes: {
      themeOverride: "dark",
    },
  },
};

export const XLarge: Story = {
  render: (args) => <SocialIcon {...args} />,
  args: {
    variant: SocialIconVariant.X_LG,
  },
  argTypes,
};

export const DiscordLarge: Story = {
  render: (args) => <SocialIcon {...args} />,
  args: {
    variant: SocialIconVariant.DISCORD_LG,
  },
  argTypes,
};

export const TelegramLarge: Story = {
  render: (args) => <SocialIcon {...args} />,
  args: {
    variant: SocialIconVariant.TELEGRAM_LG,
  },
  argTypes,
};

export const FarcasterLarge: Story = {
  render: (args) => <SocialIcon {...args} />,
  args: {
    variant: SocialIconVariant.FARCASTER_LG,
  },
  argTypes,
};

export const LinkLarge: Story = {
  render: (args) => <SocialIcon {...args} />,
  args: {
    variant: SocialIconVariant.LINK_LG,
  },
  argTypes,
  parameters: {
    themes: {
      themeOverride: "dark",
    },
  },
};

export const Youtube: Story = {
  render: (args) => <SocialIcon {...args} />,
  args: {
    variant: SocialIconVariant.YOUTUBE,
  },
  argTypes,
  parameters: {
    themes: {
      themeOverride: "dark",
    },
  },
};

export const Shopify: Story = {
  render: (args) => <SocialIcon {...args} />,
  args: {
    variant: SocialIconVariant.SHOPIFY,
  },
  argTypes,
  parameters: {
    themes: {
      themeOverride: "dark",
    },
  },
};

export const Mail: Story = {
  render: (args) => <SocialIcon {...args} />,
  args: {
    variant: SocialIconVariant.MAIL,
  },
  argTypes,
  parameters: {
    themes: {
      themeOverride: "dark",
    },
  },
};