import React from 'react';
import { Link } from 'react-router-dom';
import { svgs } from './svgs';

interface ButtonProps {
  className?: string;
  href?: string;
  onClick?: () => void;
  children?: React.ReactNode;
  px?: string;
  white?: boolean;
  isPrimary?: boolean;
  isSecondary?: boolean;
}

const Button: React.FC<ButtonProps> = ({
  className,
  href,
  onClick,
  children,
  px,
  white,
}) => {
  const classes = `button relative inline-flex items-center justify-center h-11 ${
    px || 'px-7'
  } ${white ? 'text-n-8' : 'text-n-1'} transition-colors hover:text-color-1 ${
    className || ''
  }`;

  const spanClasses = `relative z-10`;

  return href ? (
    href.startsWith('mailto:') ? (
      <a href={href} className={classes}>
        <span className={spanClasses}>{children}</span>
        {svgs(white)}
      </a>
    ) : (
      <Link to={href} className={classes}>
        <span className={spanClasses}>{children}</span>
        {svgs(white)}
      </Link>
    )
  ) : (
    <button className={classes} onClick={onClick}>
      <span className={spanClasses}>{children}</span>
      {svgs(white)}
    </button>
  );
};

export default Button;