import React from 'react';

interface SvgTextLogoProps {
  text: string;
  className?: string;
  fontSize?: number;
  fontWeight?: 'normal' | 'bold' | '500' | '600' | '700';
  letterSpacing?: number;
}

export const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
  text,
  className,
  fontSize = 24,
  fontWeight = 'bold',
  letterSpacing = 0,
}) => {
  const chars = text.split('');
  let xOffset = 0;
  const charWidth = fontSize * 0.6;

  return (
    <svg
      viewBox={`0 0 ${chars.length * charWidth + 20} ${fontSize + 20}`}
      className={className}
      xmlns="http://www.w3.org/2000/svg"
    >
      {chars.map((char, index) => {
        const x = xOffset + charWidth / 2 + 10;
        const y = fontSize + 10;
        xOffset += charWidth + letterSpacing;

        return (
          <text
            key={index}
            x={x}
            y={y}
            fontSize={fontSize}
            fontWeight={fontWeight}
            textAnchor="middle"
            dominantBaseline="middle"
            fill="currentColor"
          >
            {char}
          </text>
        );
      })}
    </svg>
  );
};
