import Link from 'next/link';
import React from 'react';

interface AnimatedLinkProps {
  href: string;
  children: React.ReactNode;
  className?: string;
  underlineColor?: string;
  textColor?: string;
}

const AnimatedLink = ({ 
  href, 
  children, 
  className = '', 
  underlineColor = 'bg-black dark:bg-white',
  textColor = 'text-black dark:text-white'
}: AnimatedLinkProps) => {
  return (
    <Link
      href={href}
      className={`group relative ${textColor} transition-colors duration-300 ${className}`}
    >
      {children}
      <span 
        className={`absolute bottom-0 left-0 w-full h-0.5 ${underlineColor} transform scale-x-0 origin-left transition-transform duration-300 ease-in-out group-hover:scale-x-100`}
      ></span>
    </Link>
  );
};

export default AnimatedLink;