import { IButton } from './Button.interface'
import React from 'react'
import { StyledButton } from './Button.theme'

const Button = ({
  id,
  as = 'a',
  variant,
  theme,
  size,
  outlined,
  leftIcon,
  rightIcon,
  removeLabel,
  className,
  href,
  ariaLabel,
  rel,
  target,
  disabled,
  type,
  children,
  onClick,
  ...props
}: IButton) => {
  return (
    <StyledButton
      id={id ? id : undefined}
      as={href ? 'a' : 'button'}
      type={type ? type : href ? '' : 'button'}
      $variant={variant}
      $theme={theme}
      $size={size}
      outlined={outlined}
      disabled={disabled}
      removeLabel={removeLabel}
      href={href ? href : undefined}
      target={target ? target : undefined}
      rel={href ? rel : undefined}
      aria-label={href ? ariaLabel : undefined}
      className={className}
      onClick={onClick}
    >
      {leftIcon}
      {children && <span>{children}</span>}
      {rightIcon}
    </StyledButton>
  )
}

export default Button