import { PageSkeleton, Skeleton } from "./index";

import { DocsPage } from "@shared/stories/DocsTemplate";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof Skeleton> = {
  title: "Components/Skeleton",
  component: Skeleton,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "Loading skeleton components for displaying placeholder content while data is being loaded.",
      },
    },
  },
  argTypes: {
    count: {
      control: { type: "number" },
      description: "Number of skeleton lines to display",
    },
    className: {
      control: { type: "text" },
      description: "Additional CSS classes",
    },
  },
  args: {
    count: 1,
  },
};

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

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

// Multiple counts
export const Multiple: Story = {
  args: {
    count: 3,
  },
};

// Custom styling
export const CustomStyling: Story = {
  args: {
    count: 2,
    className: "h-12 rounded-lg",
  },
};

// Different counts
export const DifferentCounts: Story = {
  render: () => (
    <div className="max-w-md w-full space-y-4">
      <div>
        <h4 className="mb-2 text-sm font-medium">Single Line</h4>
        <Skeleton count={1} />
      </div>
      <div>
        <h4 className="mb-2 text-sm font-medium">Three Lines</h4>
        <Skeleton count={3} />
      </div>
      <div>
        <h4 className="mb-2 text-sm font-medium">Five Lines</h4>
        <Skeleton count={5} />
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Skeleton with different line counts.",
      },
    },
  },
};

// Page skeleton
export const PageSkeletonExample: Story = {
  render: () => (
    <div className="w-full">
      <PageSkeleton />
    </div>
  ),
  parameters: {
    layout: "fullscreen",
    docs: {
      description: {
        story: "PageSkeleton component for full page loading states.",
      },
    },
  },
};

// In card
export const InCard: Story = {
  render: () => (
    <div className="max-w-sm border-border-default w-full space-y-4 rounded-lg border p-6">
      <Skeleton count={1} className="h-6 w-3/4" />
      <Skeleton count={2} />
      <Skeleton count={1} className="h-10 w-full" />
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Skeleton used within a card layout.",
      },
    },
  },
};

// List skeleton
export const ListSkeleton: Story = {
  render: () => (
    <div className="max-w-md w-full space-y-3">
      {[1, 2, 3, 4, 5].map(i => (
        <div key={i} className="flex items-center gap-3">
          <Skeleton count={1} className="h-12 w-12 rounded-full" />
          <div className="flex-1 space-y-2">
            <Skeleton count={1} className="h-4 w-3/4" />
            <Skeleton count={1} className="h-3 w-1/2" />
          </div>
        </div>
      ))}
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Skeleton used for loading list items.",
      },
    },
  },
};

// All variants showcase
export const AllVariants: Story = {
  render: () => (
    <div className="max-w-2xl w-full space-y-8">
      <div>
        <h3 className="mb-3 text-lg font-semibold">Basic Skeleton</h3>
        <Skeleton count={3} />
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">Custom Styled</h3>
        <Skeleton count={2} className="h-8 rounded-lg" />
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">In Card</h3>
        <div className="border-border-default space-y-4 rounded-lg border p-6">
          <Skeleton count={1} className="h-6 w-3/4" />
          <Skeleton count={2} />
          <Skeleton count={1} className="h-10 w-full" />
        </div>
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">Page Skeleton</h3>
        <div className="border-border-default rounded border p-4">
          <PageSkeleton />
        </div>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Showcase of all skeleton variants and use cases.",
      },
    },
  },
};