import { motion } from "motion/react"
import type { ReactNode } from "react"

import { SidebarTrigger } from "@/components/ui/sidebar"
import { slideUp, transitions } from "@/lib/motion"
import { cn } from "@/lib/utils"

/**
 * What you are looking at, floating top-centre over a full-bleed canvas.
 *
 * Reference rather than navigation: switching to another flow or dashboard is
 * what the overviews are for, so this bar carries the name and nothing that
 * takes you away from it. Shared by the flow editor and the dashboards so the
 * two shells read as one.
 *
 * The one exception sits beside it rather than in it: a dashboard assigned to
 * a panel alongside others is edited with that panel's rail on screen, because
 * the wall has it too and it takes room off the canvas.
 */
export function CanvasTitle({
  children,
  className,
}: {
  children: ReactNode
  /** Lets the shell move the bar out of the way. */
  className?: string
}) {
  return (
    <motion.div
      variants={slideUp}
      initial="hidden"
      animate="visible"
      exit="exit"
      transition={transitions.emphasized}
      className={cn(
        "pointer-events-auto absolute left-1/2 top-4 z-10 flex max-w-[calc(100%-2rem)] -translate-x-1/2 items-center gap-1 rounded-full border border-border bg-card/80 px-1.5 py-1 shadow-e2 backdrop-blur-md",
        className,
      )}
    >
      {/* The sidebar carries its own collapse control; a phone has no sidebar
          on screen to carry it. */}
      <SidebarTrigger className="size-8 shrink-0 text-muted-foreground md:hidden" />
      {children}
    </motion.div>
  )
}