import { ShieldCheck } from "lucide-react"

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

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

export function Brand({ className, subtitle }: BrandProps) {
  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">
          Syncova
          <span className="font-normal text-muted-foreground"> Policies</span>
        </span>
        {subtitle && (
          <span className="hidden text-sm leading-none text-muted-foreground sm:inline">
            · {subtitle}
          </span>
        )}
      </div>
    </div>
  )
}