import React from 'react';
import { AssistantIcon } from '../../assets/icons/AssistantIcon';
import { cn } from '../../utils/classNames';

interface BrandMarkProps {
  /** Outer diameter in pixels. */
  size?: number;
  className?: string;
}

/**
 * The single, canonical circular brand mark — used for the home hero and the
 * assistant message avatar so they're visually consistent.
 *
 * The logo is an upward-pointing triangular form whose visual mass (and centroid)
 * sits below its bounding-box center, so a plain box-center looks low. We scale it
 * up and nudge it up a touch so it reads as optically centered by its vertices.
 */
const BrandMark: React.FC<BrandMarkProps> = ({ size = 24, className }) => (
  <span
    aria-hidden="true"
    style={{ width: size, height: size }}
    className={cn(
      'inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-app-border bg-app-surface shadow-card',
      className,
    )}
  >
    <span className="flex" style={{ transform: 'translateY(-8%)' }}>
      <AssistantIcon size={Math.round(size * 0.66)} />
    </span>
  </span>
);

export default BrandMark;