import React from 'react';
import { Link, Icon } from 'UI';
import cn from 'classnames';
import cls from './backLink.module.css';

export default function BackLink({
  className, to, onClick, label = '', vertical = false, style,
}) {
  const children = (
    <div className={cn('flex items-center', { 'border w-10 h-10 rounded-full bg-white p-3 items-center justify-center hover:bg-active-blue': !label })}>
      <Icon color="gray-dark" className={cls.icon} name="prev1" size="16" />
      { label && <div className="ml-1">{ label }</div> }
    </div>
  );
  const verticalClassName = cn(className, cls.backLink, 'flex justify-center items-center pr-2 color-gray-dark', { 'flex-col': vertical });
  return to
    ? (
      <Link
        className={verticalClassName}
        to={to}
      >
        { children }
      </Link>
    )
    : (
      <button
        className={verticalClassName}
        onClick={onClick}
        style={style}
      >
        { children }
      </button>
    );
}