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

import { Loading } from "@phoenix/components";

const meta: Meta<typeof Loading> = {
  title: "Core/Feedback/Loading",
  component: Loading,
  parameters: {
    layout: "centered",
    design: {
      type: "figma",
      url: "https://www.figma.com/design/rMddnj6eV2TcQqNkejJ9qX/Core?node-id=532-1769",
    },
  },
};

export default meta;
type Story = StoryObj<typeof Loading>;

/**
 * Loading component displays a progress circle with optional message
 */
export const Default: Story = {
  args: {},
};

/**
 * Loading with a custom message
 */
export const WithMessage: Story = {
  args: {
    message: "Loading data...",
  },
};

/**
 * Loading with different sizes
 */

export const Small: Story = {
  args: {
    message: "Small loading indicator",
    size: "S",
  },
};

export const Medium: Story = {
  args: {
    message: "Medium loading indicator",
    size: "M",
  },
};

/**
 * Loading without message
 */
export const NoMessage: Story = {
  args: {
    message: undefined,
  },
};
