import { Box, useMantineTheme } from '@mantine/core';

export function BrandAvatar({
  initials = '?',
  size = 38,
}: {
  initials?: string;
  size?: number;
}) {
  const theme = useMantineTheme();
  return (
    <Box
      w={size}
      h={size}
      style={{
        borderRadius: '50%',
        background: theme.other.heroGradient as string,
        color: '#fff',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: size * 0.36,
        fontWeight: 700,
        flexShrink: 0,
      }}
    >
      {initials}
    </Box>
  );
}