import React from 'react';
  
  interface CurvedUnderlineProps {
    className?: string;
    curve?: number;
  }
  
  const CurvedUnderline: React.FC<CurvedUnderlineProps> = ({ className, curve = 10 }) => (
    <svg className={`absolute -bottom-2 left-0 w-full ${className}`} viewBox="0 0 100 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d={`M0 10 C30 ${curve}, 70 ${curve}, 100 10`} stroke="currentColor" strokeWidth="2" fill="none" />
    </svg>
  );
  
  interface UnderlinedTextProps {
    text: string;
    curve?: number;
  }
  
  const UnderlinedText: React.FC<UnderlinedTextProps> = ({ text, curve }) => (
    <div className="relative inline-block pb-2">
      <span className="relative z-10">{text}</span>
      <CurvedUnderline className="text-blue-500" curve={curve} />
    </div>
  );
  
  export default UnderlinedText;