import React, { FC } from 'react';
import { motion } from 'framer-motion';

interface NavLinkProps {
  href: string;
  children: React.ReactNode;
}

/**
 * Navigation link component.
 */
export const NavLink: FC<NavLinkProps> = ({ href, children }) => {
  return (
    <motion.a
      href={href}
      className="text-[#D7E2EA] font-medium uppercase tracking-wider text-sm md:text-lg lg:text-[1.4rem] transition-opacity duration-200"
      whileHover={{ opacity: 0.7 }}
    >
      {children}
    </motion.a>
  );
};