import { home, loading, refreshArrow } from "@simplybusiness/icons";
import type { Meta, StoryObj } from "@storybook/react";
import type { LoadingIndicatorProps } from "./LoadingIndicator";
import { LoadingIndicator } from "./LoadingIndicator";

const iconOptions = { loading, refreshArrow, home };

type StoryType = StoryObj<typeof LoadingIndicator>;

const meta: Meta<typeof LoadingIndicator> = {
  title: "Components/LoadingIndicator",
  component: LoadingIndicator,
  argTypes: {
    icon: {
      options: Object.keys(iconOptions),
      mapping: iconOptions,
      control: { type: "radio" },
    },
    color: {
      options: ["darkcyan", "deeppink", "royalblue", "tomato"],
      control: { type: "radio" },
    },
  },
};

export const Default: StoryType = {
  render: (args: LoadingIndicatorProps) => <LoadingIndicator {...args} />,
  args: {
    icon: loading,
    size: "md",
  },
};

export const Large: StoryType = {
  render: (args: LoadingIndicatorProps) => <LoadingIndicator {...args} />,
  args: {
    icon: loading,
    size: "lg",
  },
};

export const WithCustomColour: StoryType = {
  render: (args: LoadingIndicatorProps) => <LoadingIndicator {...args} />,
  args: {
    icon: loading,
    size: "md",
    color: "tomato",
  },
};

export const WithCustomIcon: StoryType = {
  render: (args: LoadingIndicatorProps) => <LoadingIndicator {...args} />,
  args: {
    icon: refreshArrow,
    size: "md",
  },
};

export default meta;
