import type { Meta, StoryObj } from '@storybook/react'
import { InfoTooltip } from './InfoTooltip'

const meta = {
  title: 'Blocks/Tooltip/InfoTooltip',
  component: InfoTooltip,
} satisfies Meta<typeof InfoTooltip>

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (_args) => <InfoTooltip>This is a default info tooltip.</InfoTooltip>,
}

export const AllSides: Story = {
  render: (_args) => (
    <div className="flex items-center justify-center gap-8 p-10">
      <InfoTooltip side="left">Tooltip on Left</InfoTooltip>

      <InfoTooltip side="top">Tooltip on Top</InfoTooltip>

      <InfoTooltip side="bottom">Tooltip on Bottom</InfoTooltip>

      <InfoTooltip side="right">Tooltip on Right</InfoTooltip>
    </div>
  ),
}

export const AllAlignments: Story = {
  render: (_args) => (
    <div className="flex items-center justify-center gap-8 p-10">
      <InfoTooltip side="bottom" align="end">
        Align End
      </InfoTooltip>

      <InfoTooltip side="top" align="center">
        Align Center
      </InfoTooltip>

      <InfoTooltip side="bottom" align="start">
        Align Start
      </InfoTooltip>
    </div>
  ),
}