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 215 75' : '0 0 75 75'
  const width = withText ? (height * 215) / 75 : height
  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