import { type SxProps } from '@mui/material';
import { styled } from '../Theme';

import LightLogo from './images/logo-light-top.svg?react';
import LightText from './images/logo-light-text.svg?react';
import DarkLogo from './images/logo-dark-top.svg?react';
import DarkText from './images/logo-dark-text.svg?react';

export interface LogoProps extends React.HTMLAttributes<HTMLSpanElement> {
  mode?: 'light' | 'dark';
  layout?: 'vertical' | 'horizontal';
  showText?: true | false;
  showLogo?: true | false;
  size?: number;
  sx?: SxProps;
}

export default function Logo({
  showText = true,
  showLogo = true,
  mode = 'dark',
  layout = 'vertical',
  size = undefined,
  style = {},
  ...rest
}: LogoProps) {
  const isLight = mode === 'light';
  const logo = isLight ? <LightLogo /> : <DarkLogo />;
  const text = isLight ? <LightText className="logo-text" /> : <DarkText className="logo-text" />;

  if (size) {
    style.width = `${size}px`;
    style.height = `${size}px`;
  }

  return (
    <Container layout={layout} style={style} {...rest}>
      {showLogo && logo}
      {showText && text}
    </Container>
  );
}

type ContainerProps = {
  layout: 'vertical' | 'horizontal';
};

const Container = styled('span')<ContainerProps>`
  display: inline-flex;
  flex-direction: ${(props) => (props.layout === 'horizontal' ? 'row' : 'column')};
  justify-content: center;
  align-items: center;

  .logo-text {
    ${(props) => (props.layout === 'vertical' ? 'margin-top: 8px;' : '')}
    ${(props) => (props.layout === 'vertical' ? '' : 'margin-left: 8px;')};
  }
`;
