Tooltip

'use client';

import * as React from 'react';
import { Button } from '../button/button';
import { HelpIcon, Tooltip, TooltipProvider } from './tooltip';

const STEP_MS = 900;

function LinkIcon() {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 20 20"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.67"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M8.333 10.833a4.167 4.167 0 0 0 6.284.45l2.5-2.5a4.167 4.167 0 0 0-5.892-5.891L9.792 4.317" />
      <path d="M11.667 9.167a4.167 4.167 0 0 0-6.284-.45l-2.5 2.5a4.167 4.167 0 0 0 5.892 5.891l1.425-1.425" />
    </svg>
  );
}

function DownloadIcon() {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 20 20"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.67"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M10 2.5v10M5.833 8.333 10 12.5l4.167-4.167M3.333 15.833h13.334" />
    </svg>
  );
}

function TrashIcon() {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 20 20"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.67"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M2.5 5h15M7.5 5V3.333h5V5M15.833 5l-.6 10.2a1.667 1.667 0 0 1-1.666 1.633H6.433A1.667 1.667 0 0 1 4.767 15.2L4.167 5M8.333 8.333v5M11.667 8.333v5" />
    </svg>
  );
}

const ACTIONS = [
  { label: 'Copy link', side: 'top', icon: <LinkIcon /> },
  { label: 'Download', side: 'bottom', icon: <DownloadIcon /> },
  { label: 'Delete', side: 'right', icon: <TrashIcon /> },
] as const;

export default function TooltipDemo({ replay = 0 }: { replay?: number }) {
  // Index of the tooltip Replay holds open; null leaves all of them to the pointer and keyboard.
  const [active, setActive] = React.useState<number | null>(null);

  React.useEffect(() => {
    if (replay === 0) return;
    const timers = [0, 1, 2, 3].map((step) =>
      window.setTimeout(() => setActive(step < ACTIONS.length ? step : null), step * STEP_MS),
    );
    return () => {
      for (const t of timers) window.clearTimeout(t);
    };
  }, [replay]);

  return (
    <TooltipProvider>
      <div className="flex flex-col items-center gap-10">
        <div className="flex items-center gap-3">
          {ACTIONS.map((action, index) => (
            <Tooltip
              key={action.label}
              content={action.label}
              side={action.side}
              open={active === null ? undefined : active === index}
            >
              <Button hierarchy="secondary" iconOnly aria-label={action.label}>
                {action.icon}
              </Button>
            </Tooltip>
          ))}
          <Tooltip
            content="Share with your team"
            supportingText="People with the link can view this page."
            side="bottom"
          >
            <Button hierarchy="secondary">Share</Button>
          </Tooltip>
        </div>
        <div className="flex items-center gap-1">
          <span className="text-sm font-medium text-secondary">Workspace name</span>
          <HelpIcon
            content="What is a workspace?"
            supportingText="A workspace holds the projects and files of your team."
          />
        </div>
      </div>
    </TooltipProvider>
  );
}