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

interface BrandMarkProps {
  /** Show the brand tagline under the wordmark. */
  withTagline?: boolean;
}

/**
 * The Balinyaar brand lockup for the auth screens: logo mark + wordmark (+ optional tagline).
 * Colours come from the palette so it tracks the color scheme.
 * @component BrandMark
 */
const BrandMark: FunctionComponent<BrandMarkProps> = ({ withTagline }) => {
  const t = useTranslations('common');
  return (
    <Stack sx={{ alignItems: 'center', gap: 1 }}>
      {/* Decorative — the wordmark below already announces "Balinyaar" to AT. */}
      <LogoLockup size={56} aria-hidden="true" />
      <Typography variant="h5" component="p" sx={{ fontWeight: 700, color: 'primary.main' }}>
        {t('brand')}
      </Typography>
      {withTagline && (
        <Typography variant="body2" sx={{ color: 'text.secondary', textAlign: 'center' }}>
          {t('brand_tagline')}
        </Typography>
      )}
    </Stack>
  );
};

export default BrandMark;
