import { Link } from 'react-router-dom'
import { AuthTicketIcon } from './AuthDecor'

type Props = {
  variant?: 'header' | 'sidebar'
  className?: string
}

export function AppBrandLink({ variant = 'header', className = '' }: Props) {
  const isSidebar = variant === 'sidebar'

  return (
    <Link
      to="/"
      className={`ac-brand-link ${isSidebar ? 'ac-sidebar-brand' : 'ac-app-header-brand'} ${className}`.trim()}
      aria-label="回到總覽"
    >
      <AuthTicketIcon
        className={isSidebar ? 'ac-sidebar-brand-icon' : 'ac-app-header-icon'}
      />
      <div className="min-w-0">
        <p className="display-en text-[10px] font-semibold tracking-[0.16em] text-accent uppercase">
          Haixun Patrol
        </p>
        <p
          className={
            isSidebar
              ? 'truncate text-base font-bold leading-snug text-ink'
              : 'truncate text-lg font-bold leading-snug text-ink'
          }
        >
          巡樓管理台
        </p>
      </div>
    </Link>
  )
}