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

const meta = {
  title: "UI/Loading",
  component: Loading,
  parameters: {
    layout: "centered",
    docs: {
      description: {
        component: "A loading indicator component with multiple variants, sizes, and color themes.",
      },
    },
  },
  tags: ["autodocs"],
  argTypes: {
    variant: {
      control: { type: "select" },
      options: ["spinner", "bars", "ring"],
      description: "Loading animation variant",
    },
    size: {
      control: { type: "select" },
      options: ["xs", "sm", "md", "lg", "xl"],
      description: "Size of the loading indicator",
    },
    color: {
      control: { type: "select" },
      options: ["primary", "secondary", "muted"],
      description: "Color theme of the loading indicator",
    },
    overlay: {
      control: { type: "boolean" },
      description: "Show with overlay background",
    },
    text: {
      control: { type: "text" },
      description: "Loading text to display",
    },
  },
} satisfies Meta<typeof Loading>;

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

export const Default: Story = {
  args: {},
};

export const WithText: Story = {
  args: {
    text: "Loading...",
  },
};

export const Sizes: Story = {
  render: () => (
    <div className="flex items-center gap-4">
      <Loading size="xs" />
      <Loading size="sm" />
      <Loading size="md" />
      <Loading size="lg" />
      <Loading size="xl" />
    </div>
  ),
};export const Variants: Story = {
  render: () => (
    <div className="flex items-center gap-8">
      <div className="text-center">
        <Loading variant="spinner" />
        <p className="mt-2 text-sm">Spinner</p>
      </div>
      <div className="text-center">
        <Loading variant="bars" />
        <p className="mt-2 text-sm">Bars</p>
      </div>
      <div className="text-center">
        <Loading variant="ring" />
        <p className="mt-2 text-sm">Ring</p>
      </div>
    </div>
  ),
};

export const Colors: Story = {
  render: () => (
    <div className="flex items-center gap-8">
      <div className="text-center">
        <Loading color="primary" />
        <p className="mt-2 text-sm">Primary</p>
      </div>
      <div className="text-center">
        <Loading color="secondary" />
        <p className="mt-2 text-sm">Secondary</p>
      </div>
      <div className="text-center">
        <Loading color="muted" />
        <p className="mt-2 text-sm">Muted</p>
      </div>
    </div>
  ),
};

export const WithOverlay: Story = {
  render: () => (
    <div className="relative h-40 w-60 bg-gray-100 rounded-lg flex items-center justify-center">
      <p>Content behind overlay</p>
      <Loading overlay text="Loading content..." />
    </div>
  ),
};