import React from 'react';
import BrandLogo from '@/components/layout/BrandLogo.tsx';
import { useTranslation } from '@/hooks/useI18n.tsx';

interface BrandIdentityProps {
  showPulse?: boolean;
  onClick?: () => void;
  className?: string;
}

const BrandIdentity = ({ showPulse, onClick, className }: BrandIdentityProps) => {
  const { t } = useTranslation();
  return (
    <div
      onClick={onClick}
      className={`flex items-center gap-2 ${onClick ? 'cursor-pointer' : ''} ${className}`}
    >
      <BrandLogo showPulse={showPulse} />
      <div className="hidden sm:block leading-tight">
        <p className="text-xs uppercase tracking-wide text-muted-foreground">
          {t('topBar.subTitle')}
        </p>
        <p className="font-serif text-xl font-semibold text-foreground">{t('topBar.title')}</p>
      </div>
    </div>
  );
};

export default BrandIdentity;