import { LogoProps } from '@/components/Logo/Logo'
import { processSvg } from '@/utils/processSvg'
import { logoSvg } from './logoSvg'

export const Logo = ({
  withText = false,
  color = '#000000',
  height = 75,
  textColor = '#000000',
}: LogoProps) => {
  if (withText && typeof textColor === 'undefined') {
    textColor = color
  }

  const viewBox = withText
    ? '0 0 711.13577 250.2845'
    : '0 0 210 255'
  const aspectRatio = withText
    ? 711.13577 / 250.2845
    : 210 / 255
  const width = height * aspectRatio
  const inner = processSvg(logoSvg, { color, textColor, withText })

  return (
    <svg
      width={width}
      height={height}
      viewBox={viewBox}
      xmlns="http://www.w3.org/2000/svg"
      dangerouslySetInnerHTML={{ __html: inner }}
    />
  )
}

export default Logo