import React, { SVGProps } from "react";

interface SvgTextLogoProps extends SVGProps<SVGSVGElement> {
  text: string;
  fontSize?: number;
  fontWeight?: number | string;
  letterSpacing?: number;
}

const SvgTextLogo = React.forwardRef<SVGSVGElement, SvgTextLogoProps>(
  (
    {
      text,
      fontSize = 48,
      fontWeight = 700,
      letterSpacing = 0,
      className,
      ...props
    },
    ref
  ) => {
    const textLength = text.length;
    const charWidth = fontSize * 0.6;
    const width = textLength * charWidth + 40;
    const height = fontSize + 20;

    return (
      <svg
        ref={ref}
        width={width}
        height={height}
        viewBox={`0 0 ${width} ${height}`}
        xmlns="http://www.w3.org/2000/svg"
        className={className}
        {...props}
      >
        <text
          x={width / 2}
          y={height / 2}
          textAnchor="middle"
          dominantBaseline="middle"
          fontSize={fontSize}
          fontWeight={fontWeight}
          letterSpacing={letterSpacing}
          fill="currentColor"
        >
          {text}
        </text>
      </svg>
    );
  }
);

SvgTextLogo.displayName = "SvgTextLogo";

export default SvgTextLogo;