import Image from "next/image"

import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"

/**
 * The mark sits in the sidebar header and survives the collapse to icons. The
 * wordmark is hidden by the sidebar's own rules, the square stays.
 *
 * The file is served from `public/`, not inlined, so it is never fetched from
 * anywhere: this application ships onto an air-gapped LAN.
 *
 * `width` and `height` are what `next/image` needs to reserve the space. The
 * size that renders comes from the class, so it follows the scale.
 */
export function BrandMark() {
  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton
          size="lg"
          className="pointer-events-none"
          render={<div />}
        >
          <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-accent">
            <Image
              src="/brand/logo-fixed_j6nfbz.svg"
              alt=""
              width={20}
              height={20}
              className="size-5"
              priority
            />
          </div>
          <div className="grid flex-1 text-left text-sm leading-tight">
            <span className="truncate font-medium">Task Tracker</span>
            <span className="truncate text-sm text-foreground/70">ADVMFR</span>
          </div>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  )
}