import React, { ReactNode } from 'react';
import Link from 'next/link';

interface HeaderLinkProps {
  title: string;
  route: string;
  icon: ReactNode;
  onDark?: boolean;
  className?: string;
  notification?: number;
}

const HeaderLink: React.FC<HeaderLinkProps> = ({
  title,
  route,
  icon,
  onDark,
  className,
  notification,
}) => {
  return (
    <Link href={route}>
      <a
        href={route}
        title={title}
        className={`headerLink${onDark ? ' onDark' : ''}${className || ''}`}
      >
        {icon}
        <p>{title}</p>
        {notification ? <span>{notification}</span> : null}
      </a>
    </Link>
  );
};

export default HeaderLink;