/* The business's mark in the top bar: its logo, or its initials on its own colour. */
import { useState } from 'react';
import { cx } from './ui';

export default function BusinessMark({ logoUrl, initials, className }: { logoUrl: string | null; initials: string; className?: string }) {
    const [broken, setBroken] = useState(false);
    if (logoUrl && !broken) {
        return <img src={logoUrl} alt="" onError={() => setBroken(true)} className={cx('size-8 shrink-0 rounded-lg bg-white object-contain ring-1 ring-line', className)} />;
    }
    return (
        <span className={cx('grid size-8 shrink-0 place-items-center rounded-lg bg-brand text-xs font-extrabold tracking-tight text-white', className)} aria-hidden>
            {initials}
        </span>
    );
}