import React from 'react'

import { handleAlign, handleVariant, handleButtonSize } from './Button.helpers'

import { ButtonProps, ContainerProps } from './Button.types'

import './Button.css'

const Button = ({
  children,
  className,
  disabled,
  icon,
  onClick,
  onMouseDown,
  type = 'button',
  variant = 'default',
  size = 'sm'
}: ButtonProps) => {
  const v = handleVariant(variant)
  const buttonSize = handleButtonSize(size)
  return (
    <button
      className={
        className +
        `flex font-medium items-center justify-center px-4 py-1 relative rounded text-sm transition-colors whitespace-nowrap ${v} ${buttonSize}`
      }
      disabled={disabled}
      onClick={onClick}
      onMouseDown={onMouseDown}
      type={type}
    >
      {children}
    </button>
  )
}

const Container = ({ align = 'center', children }: ContainerProps) => {
  const alignment = handleAlign(align)

  return (
    <div className={`${alignment} col-span-full flex items-center space-x-2`}>
      {children}
    </div>
  )
}

Button.Container = Container

export default Button
