import React from 'react'
import { Link } from '../Link'
import styles from './index.module.scss'

interface ButtonProps {
  type?: string
  size?: 'medium' | 'big'
  theme?: 'brand' | 'alt'
  text: string
  href?: string
  external?: boolean
  className?: string
}

export function Button(props: ButtonProps) {
  const {
    theme = 'brand',
    size = 'big',
    href = '/',
    external = false,
    className = '',
  } = props
  let type: string | typeof Link | null = null

  if (props.type === 'button') {
    type = 'button'
  } else if (props.type === 'a') {
    type = external ? 'a' : Link
  }

  return React.createElement(
    type ?? 'a',
    {
      className: `${styles.button} ${styles[theme]} ${styles[size]} ${className}`,
      href,
    },
    props.text
  )
}