"use client"

import { ShieldCheck } from "lucide-react"

import { useAppName } from "@/components/providers/app-config-provider"
import { DEFAULT_APP_NAME } from "@/lib/app-config"
import { cn } from "@/lib/utils"

interface BrandProps {
  className?: string
  subtitle?: string
}

export function Brand({ className, subtitle }: BrandProps) {
  const name = useAppName()

  return (
    <div className={cn("flex items-center gap-2.5", className)}>
      <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-brand text-brand-foreground">
        <ShieldCheck className="size-4.5" />
      </div>
      <div className="flex items-baseline gap-2">
        <span className="text-base leading-none font-semibold tracking-tight">
          {name === DEFAULT_APP_NAME ? (
            // Der Vorgabename wird zweifarbig gesetzt; ein konfigurierter
            // Firmenname bleibt unangetastet.
            <>
              Syncova
              <span className="font-normal text-muted-foreground"> Policies</span>
            </>
          ) : (
            name
          )}
        </span>
        {subtitle && (
          <span className="hidden text-sm leading-none text-muted-foreground sm:inline">
            · {subtitle}
          </span>
        )}
      </div>
    </div>
  )
}