import React from 'react';

export interface SvgTextLogoProps {
  text: string;
  className?: string;
  fontSize?: number;
  fontWeight?: number | string;
  letterSpacing?: number;
  fill?: string;
  strokeWidth?: number;
  stroke?: string;
}

const SvgTextLogo = React.forwardRef<SVGSVGElement, SvgTextLogoProps>(
  (
    {
      text,
      className = '',
      fontSize = 48,
      fontWeight = 700,
      letterSpacing = 0,
      fill = 'currentColor',
      strokeWidth = 0,
      stroke = 'none',
    },
    ref
  ) => {
    return (
      <svg
        ref={ref}
        viewBox={`0 0 ${text.length * fontSize * 0.6} ${fontSize * 1.5}`}
        className={className}
        preserveAspectRatio="xMidYMid meet"
      >
        <text
          x="50%"
          y="50%"
          fontSize={fontSize}
          fontWeight={fontWeight}
          letterSpacing={letterSpacing}
          fill={fill}
          strokeWidth={strokeWidth}
          stroke={stroke}
          textAnchor="middle"
          dominantBaseline="middle"
        >
          {text}
        </text>
      </svg>
    );
  }
);

SvgTextLogo.displayName = 'SvgTextLogo';

export default SvgTextLogo;