import { useId } from 'react';
import { useTheme } from '@mui/material';
import { type HumandLogoProps } from './types';
/**
* Humand brand logo as an inline SVG.
*
* By default, the logo is theme-aware:
* - Light mode: brand navy (`palette.new.text.neutral.brand`).
* - Dark mode: pure white (`palette.new.text.neutral.inverted`, which
* resolves to white in both modes; we apply it only in dark on purpose
* because design wants a pure white logo on dark surfaces — the standard
* inverted brand shade `brand[100]` reads as off-white blue).
*
* To override the color, pass `style={{ color: '#xxx' }}`. The component
* renders all paths with `fill="currentColor"` so any CSS `color` value
* propagates to the strokes.
*
* Do not pass `fill` directly — it has no effect because each path declares
* its own `fill="currentColor"`.
*
* Accessibility: when `title` is provided, the SVG renders a ``
* element as its first child and is exposed to assistive tech via
* `role="img"` + `aria-labelledby`. When omitted, the SVG is decorative
* (`aria-hidden`).
*/
const HumandLogo = ({ title, style, ...props }: HumandLogoProps) => {
const theme = useTheme();
const titleId = useId();
const defaultColor =
theme.palette.mode === 'dark'
? theme.palette.new?.text?.neutral?.inverted
: theme.palette.new?.text?.neutral?.brand;
return (
<svg
viewBox="100 464 880 153"
role={title ? 'img' : undefined}
aria-hidden={title ? undefined : true}
aria-labelledby={title ? titleId : undefined}
focusable="false"
style={{ color: defaultColor, ...style }}
{...props}
>
{title && <title id={titleId}>{title}}
);
};
export default HumandLogo;