import * as React from 'react';
import classNames from 'classnames/bind';

import ArrowRight from 'assets/svg/arrow-right.svg';

import s from './ArrowLink.module.scss';

const cn = classNames.bind(s);

interface IArrowLinkProps {
  children: React.ReactNode;
  to: string;
  color?: string;
  textColor?: string;
  onClick?: () => void;
  underForm?: boolean;
  inverted?: boolean;
  paddingLeft?: boolean;
  paddingBottom?: boolean;
  underline?: boolean;
  icon?: React.ReactNode;
  newTab?: boolean;
  smaller?: boolean;
}

export const ArrowLink = ({
  children,
  to,
  color,
  textColor,
  onClick,
  underForm,
  inverted,
  paddingLeft,
  underline,
  paddingBottom,
  icon,
  newTab,
  smaller,
}: IArrowLinkProps) => {
  const target = newTab ? 'blank_' : '';

  return (
    <span className={cn(s.link, { underForm, inverted, paddingLeft, paddingBottom, smaller })}>
      <a href={to} onClick={onClick} target={target}>
        <span className={cn(s.link__icon, `color-${color}`)}>{icon || <ArrowRight />}</span>
        <span className={cn(s.link__content, `color-${textColor}`, { underline })}>{children}</span>
      </a>
    </span>
  );
};