/* eslint-disable react/button-has-type */
import Link from 'next/link';
import React from 'react';
import { LinkProps } from '../../model/interactive';
import Loader from './Loader';

const RoundedLink: React.FC<LinkProps> = ({
  title,
  altTitle,
  size,
  className,
  isLoading,
  isDisabled,
  leftIcon,
  rightIcon,
  route,
  asRoute,
  isExternal,
}) => {
  return (
    <Link href={route} as={asRoute}>
      <a
        href={route}
        title={altTitle || title}
        target={isExternal ? '_blank' : ''}
        className={`roundedClick ${isLoading ? 'isLoading' : ''} ${
          size || 'medium'
        } ${leftIcon ? 'leftIcon' : ''} ${rightIcon ? 'rightIcon' : ''} ${
          isDisabled ? ' isDisabled' : ''
        }${className || ''}`}
      >
        {leftIcon}
        {isLoading ? <Loader /> : <p>{title}</p>}
        {rightIcon}
      </a>
    </Link>
  );
};

export default RoundedLink;