import type { ComponentProps } from "react"

import { cn } from "~/lib/utils"

function Appbar({ className, ...props }: ComponentProps<"header">) {
  return (
    <header
      data-slot="appbar"
      className={cn(
        "flex h-14 w-full items-center gap-3 border-b bg-background px-4",
        className
      )}
      {...props}
    />
  )
}

function AppbarTitle({ className, ...props }: ComponentProps<"span">) {
  return (
    <span
      data-slot="appbar-title"
      className={cn("font-heading text-sm font-semibold", className)}
      {...props}
    />
  )
}

function AppbarSpacer({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="appbar-spacer"
      className={cn("flex-1", className)}
      {...props}
    />
  )
}

function AppbarActions({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="appbar-actions"
      className={cn("flex items-center gap-1", className)}
      {...props}
    />
  )
}

export { Appbar, AppbarTitle, AppbarSpacer, AppbarActions }