import LogoSvg from '@/assets/logo.svg';
import LogoIconSvg from '@/assets/logo_icon.svg';
import { Box, type SxProps } from '@mui/material';

interface LogoProps {
  boxSx?: SxProps;
  isIcon?: boolean;
}

function Logo({ boxSx, isIcon = false }: LogoProps) {
  // TODO: handle transition
  return (
    <Box
      component="img"
      src={isIcon ? LogoIconSvg : LogoSvg}
      sx={{
        width: isIcon ? '30px' : '120px',
        height: 'auto',
        ...boxSx,
      }}
    />
  );
}

export default Logo;
