import { jsx } from "react/jsx-runtime";
import styled from "@emotion/styled";
const InitialsBadgeRoot = styled.span`
  display: inline-flex;
  width: var(--initials-badge-size, 24px);
  height: var(--initials-badge-size, 24px);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--canvas-primary);
  color: var(--canvas-on-primary, #ffffff);
  font-size: calc(var(--initials-badge-size, 24px) * 0.5);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
`;
function getInitial(name) {
    const trimmed = name.trim();
    if (!trimmed) return '?';
    return [
        ...trimmed
    ][0] ?? '?';
}
function InitialsBadge({ name, size, className, style, 'data-testid': dataTestId }) {
    const mergedStyle = (()=>{
        const sizeStyle = size ? {
            ['--initials-badge-size']: size
        } : void 0;
        if (!sizeStyle && !style) return;
        return {
            ...sizeStyle,
            ...style
        };
    })();
    return /*#__PURE__*/ jsx(InitialsBadgeRoot, {
        "aria-hidden": "true",
        className: className,
        "data-testid": dataTestId,
        style: mergedStyle,
        children: getInitial(name)
    });
}
export { InitialsBadge, getInitial };
