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

type Story = StoryObj<typeof Label>

const meta: Meta<typeof Label> = {
  title: "Design System/Label",
  component: Label,
  args: {
    children: "Hello world",
  },
}

export default meta

export const Default: Story = {}

export const Required: Story = {
  args: {
    required: true,
  },
}

export const VisuallyHidden: Story = {
  args: {
    visuallyHidden: true,
  },
}

export const AllVariants: Story = {
  render: function Render() {
    return (
      <TestGridContainer>
        <Label {...meta.args} {...Default.args} />
        <Label {...meta.args} {...Required.args} />
        <Label {...meta.args} {...VisuallyHidden.args} />
      </TestGridContainer>
    )
  },
}