import type { Meta, StoryObj } from "@storybook/react";
import { Tooltip, TooltipProvider, Button } from "@managemate/react";

const meta = {
  title: "Overlays/Tooltip",
  component: Tooltip,
  tags: ["autodocs"],
  decorators: [
    (Story) => (
      <TooltipProvider>
        <Story />
      </TooltipProvider>
    ),
  ],
  parameters: {
    docs: {
      description: {
        component:
          "Tooltip basé sur Radix UI. Auto-flip, focus management, Escape, prefers-reduced-motion. Exige `<TooltipProvider>` à la racine.",
      },
    },
  },
} satisfies Meta<typeof Tooltip>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: { content: "Action sécurisée" },
  render: (args) => (
    <Tooltip {...args}>
      <Button variant="ghost">Survoler ou focus</Button>
    </Tooltip>
  ),
};

export const Placements: Story = {
  render: () => (
    <div style={{ display: "flex", gap: 24, justifyContent: "center", padding: 80 }}>
      {(["top", "right", "bottom", "left"] as const).map((p) => (
        <Tooltip key={p} content={`Position ${p}`} placement={p}>
          <Button variant="ghost">{p}</Button>
        </Tooltip>
      ))}
    </div>
  ),
};