import React, { useMemo } from 'react';
import { NavLink } from 'react-router-dom';

export const BrandBlock = React.memo(function BrandBlock({ adminMode = false }: { adminMode?: boolean }) {
  const logoSrc = useMemo(() => '/img/logo.png', []);

  return (
    <NavLink
      to={adminMode ? '/admin' : '/'}
      aria-label="BillTracker"
      className="flex items-center gap-2 rounded-xl focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
    >
      <img
        src={logoSrc}
        alt="BillTracker"
        className="h-16 w-auto max-w-[9rem] object-contain drop-shadow-[0_1px_2px_rgba(0,0,0,0.45)]"
      />
      {adminMode && (
        <span className="hidden sm:inline-flex rounded-full border border-destructive/25 bg-destructive/10 px-2 py-0.5 text-[10px] font-semibold uppercase text-destructive">
          Admin
        </span>
      )}
    </NavLink>
  );
});

BrandBlock.displayName = 'BrandBlock';