import { Meta, StoryObj } from "@storybook/nextjs-vite";
import Typography from "./Typography";

/** Reusable Typography Component */
const meta: Meta<typeof Typography> = {
  title: "UI/Typography",
  component: Typography,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  args: {
    children: "Typography Text",
    size: "md",
    weight: "regular",
    color: "default",
    align: "center",
    as: "span",
    font: "inter",
  },
  argTypes: {
    as: {
      control: { type: "select" },
      options: ["span", "p", "h1", "h2", "h3", "h4", "h5", "h6", "div"],
      description: "HTML element to render",
    },
    size: {
      control: { type: "select" },
      options: ["xs", "sm", "md", "lg", "xl", "2xl"],
      description: "Text size variant",
    },
    weight: {
      control: { type: "select" },
      options: ["regular", "medium", "semiBold", "bold", "extraBold", "black"],
      description: "Font weight variant",
    },
    color: {
      control: { type: "select" },
      options: [
        "default",
        "primary",
        "secondary",
        "destructive",
        "success",
        "muted",
        "card",
        "accent",
      ],
      description: "Text color variant",
    },
    align: {
      control: { type: "select" },
      options: ["center", "left", "right"],
      description: "Text alignment",
    },
    children: {
      control: { type: "text" },
      description: "Text content",
    },
    font: {
      control: { type: "select" },
      options: ["manrope", "inter", "geistSans", "geistMono"],
      description: "Font variant",
    },
  },
};

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

export const Default = {
  args: {
    children: "Default Typography",
  },
} satisfies Story;

export const Fonts = {
  decorators: [
    () => (
      <div className="space-y-4">
        <Typography font="manrope">Font: manrope</Typography>
        <Typography font="inter">Font: inter</Typography>
        <Typography font="geistSans">Font: geist Sans</Typography>
        <Typography font="geistMono">Font: geist Mono</Typography>
      </div>
    ),
  ],
} satisfies Story;

export const Sizes = {
  decorators: [
    () => (
      <div className="space-y-4">
        <Typography size="xs">Extra Small Text (xs)</Typography>
        <Typography size="sm">Small Text (sm)</Typography>
        <Typography size="md">Medium Text (md)</Typography>
        <Typography size="lg">Large Text (lg)</Typography>
        <Typography size="xl">Extra Large Text (xl)</Typography>
        <Typography size="2xl">2X Large Text (2xl)</Typography>
      </div>
    ),
  ],
} satisfies Story;

export const Weights = {
  decorators: [
    () => (
      <div className="space-y-4">
        <Typography weight="regular">Regular Weight</Typography>
        <Typography weight="medium">Medium Weight</Typography>
        <Typography weight="semiBold">Semi Bold Weight</Typography>
        <Typography weight="bold">Bold Weight</Typography>
        <Typography weight="extraBold">Extra Bold Weight</Typography>
        <Typography weight="black">Black Weight</Typography>
      </div>
    ),
  ],
} satisfies Story;

export const Colors = {
  decorators: [
    () => (
      <div className="space-y-4 flex flex-col gap-4">
        <Typography color="default">Default Color</Typography>
        <Typography color="primary" className="bg-primary rounded-sm">
          Primary Color
        </Typography>
        <Typography color="secondary">Secondary Color</Typography>
        <Typography color="destructive">Destructive Color</Typography>
        <Typography color="success">Success Color</Typography>
        <Typography color="muted">Muted Color</Typography>
        <Typography color="card">Card Color</Typography>
        <Typography color="accent">Accent Color</Typography>
      </div>
    ),
  ],
} satisfies Story;

export const Alignments = {
  decorators: [
    () => (
      <div className="space-y-4 w-full">
        <Typography align="left">Left Aligned Text</Typography>
        <Typography align="center">Center Aligned Text</Typography>
        <Typography align="right">Right Aligned Text</Typography>
      </div>
    ),
  ],
} satisfies Story;

export const AsElements = {
  decorators: [
    () => (
      <div className="space-y-4">
        <Typography as="h1" size="2xl" weight="bold">
          Heading 1
        </Typography>
        <Typography as="h2" size="xl" weight="semiBold">
          Heading 2
        </Typography>
        <Typography as="h3" size="lg" weight="medium">
          Heading 3
        </Typography>
        <Typography as="p" size="md">
          Paragraph text with regular styling
        </Typography>
        <Typography as="span" size="sm" color="muted">
          Small span text
        </Typography>
      </div>
    ),
  ],
} satisfies Story;

export const Headings = {
  decorators: [
    () => (
      <div className="space-y-6">
        <Typography as="h1" size="2xl" weight="bold" color="default">
          Main Heading
        </Typography>
        <Typography as="h2" size="xl" weight="semiBold" color="secondary">
          Section Heading
        </Typography>
        <Typography as="h3" size="lg" weight="medium" color="default">
          Subsection Heading
        </Typography>
        <Typography as="p" size="md" weight="regular" color="muted">
          This is a paragraph of text that demonstrates how the typography
          component can be used for body content with proper spacing and
          readability.
        </Typography>
      </div>
    ),
  ],
} satisfies Story;

export const CustomStyles = {
  args: {
    children: "Custom Styled Text",
    className: "bg-blue-100 text-blue-800 px-4 py-2 rounded-lg",
    size: "lg",
    weight: "bold",
  },
} satisfies Story;
