import React from 'react';

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

const SvgTextLogo: React.FC<SvgTextLogoProps> = ({ text, className = '' }) => {
  return (
    <svg
      viewBox={`0 0 ${text.length * 60} 100`}
      className={`w-full h-auto ${className}`}
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#3b82f6" />
          <stop offset="100%" stopColor="#8b5cf6" />
        </linearGradient>
      </defs>
      {text.split('').map((char, index) => (
        <text
          key={index}
          x={index * 60}
          y="60"
          fontSize="48"
          fontWeight="bold"
          fill="url(#textGradient)"
          dominantBaseline="middle"
          textAnchor="middle"
        >
          {char}
        </text>
      ))}
    </svg>
  );
};

export default SvgTextLogo;