import type { Meta, StoryObj } from '@storybook/react'
import { createSizeDecorator } from '../../utils/decorators'
import { InfoTooltip } from '../Tooltip'
import { Label } from './Label'

const meta: Meta<typeof Label> = {
  title: 'Form/Label',
  component: Label,
  decorators: [createSizeDecorator('XS')],
  argTypes: {
    children: {
      control: 'text',
      defaultValue: 'Label Text',
      description: 'The text content of the label.',
    },
    className: {
      control: 'text',
      defaultValue: '',
      description: 'Additional CSS classes for the label.',
    },
    size: {
      control: { type: 'select' },
      options: ['default', 'sm'],
      description: 'The size of the label',
    },
  },
}

export default meta

type Story = StoryObj<typeof Label>

export const Default: Story = {
  args: {
    children: 'Label',
  },
}
export const Small: Story = {
  args: {
    children: 'SM Label',
    size: 'sm',
  },
}

export const WithInfoTooltip: Story = {
  render: function Render(_args) {
    return (
      <Label>
        With Info Tooltip
        <InfoTooltip>This is a tooltip</InfoTooltip>
      </Label>
    )
  },
}

export const AsChild: Story = {
  render: function Render(_args) {
    return (
      <Label asChild>
        <div>
          I am a div that looks like a Label
          <InfoTooltip>This is a tooltip on a div</InfoTooltip>
        </div>
      </Label>
    )
  },
}

export const WithCustomInfoTooltip: Story = {
  args: {
    children: [
      'Default Label',
      <InfoTooltip key="wcit-label-info-tooltip" side="right" align="start">
        This custom tooltip is aligned to the right and the content is aligned
        to the start.
      </InfoTooltip>,
    ],
  },
}