import type { Meta, StoryObj } from '@storybook/react-vite';
import { BoldIcon, ItalicIcon, UnderlineIcon } from 'lucide-react';

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
import { Button } from '../button/button';

const meta = {
  title: 'Components/Tooltip',
  component: Tooltip,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Short hint on hover or keyboard focus. Never put essential information or interactive content in one — it is unreachable on touch devices. Icon-only buttons still need their own `aria-label`.',
      },
    },
  },
  tags: ['autodocs'],
  decorators: [(Story) => <TooltipProvider><Story /></TooltipProvider>],
} satisfies Meta<typeof Tooltip>;

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

export const Default: Story = {
  render: () => (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Hover me</Button>
      </TooltipTrigger>
      <TooltipContent>Adds the item to your library</TooltipContent>
    </Tooltip>
  ),
};

/** The label names the button; the tooltip only repeats it visually. */
export const IconToolbar: Story = {
  render: () => (
    <div className="flex gap-1">
      {[
        [BoldIcon, 'Bold', '⌘B'],
        [ItalicIcon, 'Italic', '⌘I'],
        [UnderlineIcon, 'Underline', '⌘U'],
      ].map(([Icon, label, shortcut]) => {
        const IconComponent = Icon as typeof BoldIcon;
        return (
          <Tooltip key={label as string}>
            <TooltipTrigger asChild>
              <Button variant="ghost" size="icon" aria-label={label as string}>
                <IconComponent />
              </Button>
            </TooltipTrigger>
            <TooltipContent>
              {label as string} <span className="opacity-60">{shortcut as string}</span>
            </TooltipContent>
          </Tooltip>
        );
      })}
    </div>
  ),
};