"use client"

import Link from "next/link"
import { HeaderAccountActions } from "@/components/suite/header-account-actions"
import { suitePublicAsset } from "@/lib/suite/suite-public-asset"
import {
  SUITE_APP_LOGO_LOCKUP_CLASS,
  SUITE_APP_LOGO_MARK_CLASS,
  SUITE_APP_LOGO_TEXT_CLASS,
} from "@/lib/suite/suite-chrome-classes"
import { cn } from "@/lib/utils"

export function MeetHeader({
  title,
  trailing,
}: {
  title?: string
  trailing?: React.ReactNode
}) {
  return (
    <header className="flex h-16 shrink-0 items-center gap-3 border-b border-border/60 bg-app-canvas px-3 sm:px-4">
      <Link href="/meet" className={cn(SUITE_APP_LOGO_LOCKUP_CLASS)}>
        <img
          src={suitePublicAsset("/ultimeet-mark.svg")}
          alt=""
          className={SUITE_APP_LOGO_MARK_CLASS}
          draggable={false}
          aria-hidden
        />
        <span className={SUITE_APP_LOGO_TEXT_CLASS}>{title ?? "UltiMeet"}</span>
      </Link>

      <div className="ml-auto flex items-center gap-2">
        {trailing}
        <HeaderAccountActions />
      </div>
    </header>
  )
}