import { Link } from "./index";

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

const meta: Meta<typeof Link> = {
  title: "Components/Link",
  component: Link,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "A flexible link component with multiple variants and states.",
      },
    },
  },
  argTypes: {
    variant: {
      control: { type: "select" },
      options: ["default", "unstyled"],
      description: "Link styling variant",
    },
    href: {
      control: { type: "text" },
      description: "Link URL",
    },
    target: {
      control: { type: "select" },
      options: ["_self", "_blank", "_parent", "_top"],
      description: "Link target",
    },
    disabled: {
      control: { type: "boolean" },
      description: "Disable the link",
    },
    children: {
      control: { type: "text" },
      description: "Link content",
    },
  },
  args: {
    children: "Link Text",
    href: "#",
    variant: "default",
    target: "_self",
    disabled: false,
  },
};

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

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

// Unstyled link
export const Unstyled: Story = {
  args: {
    variant: "unstyled",
    children: "Unstyled Link",
  },
};

// External link
export const External: Story = {
  args: {
    href: "https://example.com",
    target: "_blank",
    children: "External Link ↗",
  },
};

// Disabled link
export const Disabled: Story = {
  args: {
    disabled: true,
    children: "Disabled Link",
  },
};

// Link with icon
export const WithIcon: Story = {
  args: {
    children: "Link with Icon →",
    className: "flex items-center gap-2",
  },
};

// Navigation links
export const Navigation: Story = {
  render: () => (
    <nav className="flex gap-6">
      <Link href="#home" variant="default">
        Home
      </Link>
      <Link href="#about">About</Link>
      <Link href="#services">Services</Link>
      <Link href="#contact">Contact</Link>
    </nav>
  ),
  parameters: {
    docs: {
      description: {
        story: "Navigation menu with different link variants.",
      },
    },
  },
};

// All variants showcase
export const AllVariants: Story = {
  render: () => (
    <div className="space-y-6">
      <div>
        <h3 className="mb-3 text-lg font-semibold">Variants</h3>
        <div className="flex gap-4">
          <Link href="#" variant="default">
            Default
          </Link>
          <Link href="#" variant="unstyled">
            Unstyled
          </Link>
        </div>
      </div>

      <div>
        <h3 className="mb-3 text-lg font-semibold">Variants</h3>
        <div className="flex items-center gap-4">
          <Link href="#" variant="default">
            Default
          </Link>
          <Link href="#" variant="unstyled">
            Unstyled
          </Link>
        </div>
      </div>

      <div>
        <h3 className="mb-3 text-lg font-semibold">States</h3>
        <div className="flex gap-4">
          <Link href="#" disabled>
            Disabled
          </Link>
          <Link href="https://example.com" target="_blank">
            External ↗
          </Link>
        </div>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Showcase of all link variants, sizes, and states.",
      },
    },
  },
};