Morphic Tooltip

"use client";

import {
  Brain,
  CheckCircle2,
  Code2,
  MessageSquareText,
  Sparkles,
} from "lucide-react";
import {
  MorphicTooltip,
  MorphicTooltipProvider,
} from "@/components/premium/morphic-tooltip";

const actions = [
  {
    label: "Think",
    tooltip: "Switch to a deeper reasoning pass",
    icon: <Brain className="size-4" />,
  },
  {
    label: "Review",
    tooltip: "Review queued",
    icon: <CheckCircle2 className="size-4" />,
  },
  {
    label: "Code",
    tooltip: "Ask the coding agent to implement the change",
    icon: <Code2 className="size-4" />,
  },
  {
    label: "Message",
    tooltip: "Open the active",
    icon: <MessageSquareText className="size-4" />,
  },
];

export function MorphicTooltipPreview() {
  return (
    <MorphicTooltipProvider>
      <div className="flex w-full max-w-xl flex-col items-center gap-8 px-4">
        <div className="flex items-center gap-2 rounded-xl border border-border bg-card/60 p-1 shadow-[inset_0_1px_0_rgb(255_255_255_/_0.06),inset_0_0_22px_-18px_color-mix(in_oklch,var(--foreground)_28%,transparent)]">
          {actions.map((action) => (
            <MorphicTooltip key={action.label} content={action.tooltip}>
              <button
                type="button"
                className="grid size-10 place-items-center rounded-2xl text-muted-foreground transition-colors hover:bg-primary/5 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                aria-label={action.label}
              >
                {action.icon}
              </button>
            </MorphicTooltip>
          ))}
        </div>

        <MorphicTooltip
          side="bottom"
          content={
            <span className="inline-flex items-center gap-1.5">
              <Sparkles className="size-3.5 text-accent" />
              Shared surface follows focus and hover
            </span>
          }
        >
          <button
            type="button"
            className="inline-flex h-10 items-center gap-2 rounded-full border border-border bg-background px-4 font-medium text-sm transition-colors hover:border-border-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
          >
            Hover the toolbar
          </button>
        </MorphicTooltip>
      </div>
    </MorphicTooltipProvider>
  );
}