import React from 'react';

interface SvgTextLogoProps {
  text: string;
  className?: string;
  size?: 'sm' | 'md' | 'lg' | 'xl';
  weight?: 'light' | 'normal' | 'bold';
}

const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
  text,
  className = '',
  size = 'md',
  weight = 'bold',
}) => {
  const sizeMap = {
    sm: { width: 120, height: 40, fontSize: 24 },
    md: { width: 200, height: 60, fontSize: 40 },
    lg: { width: 300, height: 80, fontSize: 56 },
    xl: { width: 400, height: 100, fontSize: 72 },
  };

  const weightMap = {
    light: 300,
    normal: 400,
    bold: 700,
  };

  const dimensions = sizeMap[size];
  const fontWeight = weightMap[weight];

  return (
    <svg
      width={dimensions.width}
      height={dimensions.height}
      viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}
      className={className}
      xmlns="http://www.w3.org/2000/svg"
    >
      <text
        x="50%"
        y="50%"
        textAnchor="middle"
        dominantBaseline="central"
        fontSize={dimensions.fontSize}
        fontWeight={fontWeight}
        fill="currentColor"
        fontFamily="inherit"
      >
        {text}
      </text>
    </svg>
  );
};

export default SvgTextLogo;