Tooltip

export const AllStates = () => (
  <TooltipProvider>
    <div className="flex flex-col gap-8 py-12">
      <div className="flex items-center gap-4">
        <span className="text-steel w-24 text-sm">Default</span>
        <Tooltip>
          <Tooltip.Trigger asChild>
            <Button variant="outline">Hover</Button>
          </Tooltip.Trigger>
          <Tooltip.Content>Default tooltip</Tooltip.Content>
        </Tooltip>
      </div>

      <div className="flex items-center gap-4">
        <span className="text-steel w-24 text-sm">On icon</span>
        <Tooltip>
          <Tooltip.Trigger asChild>
            <button
              className="border-chrome text-steel hover:text-ink inline-flex size-8 items-center justify-center border"
              aria-label="Help"
            >
              ?
            </button>
          </Tooltip.Trigger>
          <Tooltip.Content>Help information</Tooltip.Content>
        </Tooltip>
      </div>

      <div className="flex items-center gap-4">
        <span className="text-steel w-24 text-sm">Long text</span>
        <Tooltip>
          <Tooltip.Trigger asChild>
            <Button variant="outline">Long tooltip</Button>
          </Tooltip.Trigger>
          <Tooltip.Content className="max-w-xs">
            This is a longer tooltip that demonstrates how the component handles more content.
          </Tooltip.Content>
        </Tooltip>
      </div>
    </div>
  </TooltipProvider>
);

export const Positions: Story = {
  render: () => (
    <div className="flex items-center justify-center gap-8 py-12">
      <Tooltip>
        <Tooltip.Trigger asChild>
          <Button variant="outline">Top</Button>
        </Tooltip.Trigger>
        <Tooltip.Content side="top">Tooltip on top</Tooltip.Content>
      </Tooltip>

      <Tooltip>
        <Tooltip.Trigger asChild>
          <Button variant="outline">Bottom</Button>
        </Tooltip.Trigger>
        <Tooltip.Content side="bottom">Tooltip on bottom</Tooltip.Content>
      </Tooltip>

      <Tooltip>
        <Tooltip.Trigger asChild>
          <Button variant="outline">Left</Button>
        </Tooltip.Trigger>
        <Tooltip.Content side="left">Tooltip on left</Tooltip.Content>
      </Tooltip>

      <Tooltip>
        <Tooltip.Trigger asChild>
          <Button variant="outline">Right</Button>
        </Tooltip.Trigger>
        <Tooltip.Content side="right">Tooltip on right</Tooltip.Content>
      </Tooltip>
    </div>
  ),
};