import React, { SVGProps } from 'react';

interface SvgTextLogoProps extends SVGProps<SVGSVGElement> {
  text?: string;
  fontSize?: number;
  fontFamily?: string;
  fill?: string;
  className?: string;
}

const SvgTextLogo = React.forwardRef<SVGSVGElement, SvgTextLogoProps>(
  (
    {
      text = 'WEBILD',
      fontSize = 48,
      fontFamily = 'Arial, sans-serif',
      fill = '#000000',
      className = '',
      ...props
    },
    ref
  ) => {
    return (
      <svg
        ref={ref}
        viewBox="0 0 500 100"
        xmlns="http://www.w3.org/2000/svg"
        className={className}
        {...props}
      >
        <defs>
          <style>
            {`
              @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');
            `}
          </style>
        </defs>
        <text
          x="50%"
          y="50%"
          textAnchor="middle"
          dominantBaseline="middle"
          fontSize={fontSize}
          fontFamily={fontFamily}
          fill={fill}
          fontWeight="bold"
        >
          {text}
        </text>
      </svg>
    );
  }
);

SvgTextLogo.displayName = 'SvgTextLogo';

export default SvgTextLogo;