import Link from 'next/link'
import React, { ElementType } from 'react'
import { useBackgroundColor } from '../BackgroundColor'
import { Chevron } from '../icons/Chevron'
import classes from './index.module.scss'

export type Props = {
  label?: string
  appearance?: 'default' | 'primary' | 'secondary'
  el?: 'button' | 'link' | 'a'
  onClick?: () => void
  href?: string
  newTab?: boolean
  className?: string
}

export const Button: React.FC<Props> = ({
  el = 'button',
  label,
  newTab,
  href,
  appearance,
  className: classNameFromProps,
}) => {
  const backgroundColor = useBackgroundColor()
  const newTabProps = newTab
    ? { target: '_blank', rel: 'noopener noreferrer' }
    : {}
  const className = [
    classNameFromProps,
    classes[`appearance--${appearance}`],
    classes[`${appearance}--${backgroundColor}`],
    classes.button,
  ]
    .filter(Boolean)
    .join(' ')

  const content = (
    <div className={classes.content}>
      <Chevron />
      <span className={classes.label}>{label}</span>
    </div>
  )

  if (el === 'link') {
    return (
      <Link {...newTabProps} href={href || ''} className={className}>
        {content}
      </Link>
    )
  }

  const Element: ElementType = el

  return (
    <Element href={href} className={className} {...newTabProps}>
      {content}
    </Element>
  )
}