import React from "react";

interface SvgTextLogoProps {
  text?: string;
  className?: string;
  textClassName?: string;
  ariaLabel?: string;
}

const SvgTextLogo = React.forwardRef<SVGSVGElement, SvgTextLogoProps>(
  (
    { text = "Webild", className = "", textClassName = "", ariaLabel },
    ref
  ) => {
    const textLength = text.length;
    const charWidth = 50;
    const viewBoxWidth = textLength * charWidth + 20;

    return (
      <svg
        ref={ref}
        viewBox={`0 0 ${viewBoxWidth} 100`}
        className={`w-full h-full ${className}`}
        xmlns="http://www.w3.org/2000/svg"
        aria-label={ariaLabel || text}
        role="img"
      >
        <defs>
          <style>{`
            @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');
          `}</style>
        </defs>
        <text
          x="50%"
          y="50%"
          dominantBaseline="middle"
          textAnchor="middle"
          className={`fill-current font-bold text-4xl ${textClassName}`}
          fontFamily="Inter, sans-serif"
          fontSize="48"
          fontWeight="900"
        >
          {text}
        </text>
      </svg>
    );
  }
);

SvgTextLogo.displayName = "SvgTextLogo";

export default SvgTextLogo;