import { Meta, StoryObj } from "@storybook/react"
import React from "react"
import { TestGridContainer } from "../../../tests/TestGridContainer"
import { Text } from "../Text"
import { Link } from "./Link"

type Story = StoryObj<typeof Link>

const meta: Meta<typeof Link> = {
  title: "Design System/Link",
  component: Link,
  args: {
    href: "https://www.opensea.io",
    children: "OpenSea",
  },
}

export default meta

export const Default: Story = {}

export const Unstyled: Story = {
  args: {
    variant: "unstyled",
  },
}

export const Disabled: Story = {
  args: {
    disabled: true,
  },
}

export const WithText = () => {
  return (
    <Link href="https://www.opensea.io">
      <Text.Body size="xs" weight="regular">
        OpenSea
      </Text.Body>
    </Link>
  )
}

export const AllVariants: Story = {
  render: function Render() {
    return (
      <TestGridContainer>
        <Link {...meta.args} {...Default.args} />
        <Link {...meta.args} {...Unstyled.args} />
        <Link {...meta.args} {...Disabled.args} />
        <WithText />
      </TestGridContainer>
    )
  },
}