import { FunctionComponent } from 'react';
import { Stack, Typography } from '@mui/material';
import { useTranslations } from 'next-intl';
import LogoLockup from '@/components/common/AppIcon/icons/LogoLockup';

interface Props {
  size?: number;
}

/**
 * Compact, horizontal brand lockup for chrome (the customer home header + the sidebar shells'
 * drawer header) — the vertical, larger `BrandMark` is for the auth splash only.
 * @component BrandLockup
 */
const BrandLockup: FunctionComponent<Props> = ({ size = 28 }) => {
  const t = useTranslations('common');
  return (
    <Stack direction="row" sx={{ alignItems: 'center', gap: 1, minWidth: 0 }}>
      {/* Decorative — the wordmark already announces "Balinyaar" to AT. */}
      <LogoLockup size={size} aria-hidden="true" />
      <Typography variant="h6" component="span" noWrap sx={{ fontWeight: 700 }}>
        {t('brand')}
      </Typography>
    </Stack>
  );
};

export default BrandLockup;
