import React from 'react'
import { ButtonProps } from '@/types'

const Button = ({
  onClick,
  className,
  text,
  type,
  leftIcon,
  midIcon,
  rightIcon,
  size = 'lg',
}: ButtonProps) => {
  const sizeClasses = {
    sm: 'h-10 text-sm',
    md: 'h-12 text-base',
    lg: 'h-14 text-xl',
  }

  return (
    <button
      onClick={onClick}
      className={`cursor-pointer rounded-xl transition-all duration-500 hover:shadow-2xl ${sizeClasses[size]} ${className}`}
      type={type}
    >
      {leftIcon && <span className="mr-2 flex items-center">{leftIcon}</span>}
      {midIcon && <span className="flex items-center">{midIcon}</span>}
      <span className="text-center font-normal">{text}</span>
      {rightIcon && <span className="ml-2 flex items-center">{rightIcon}</span>}
    </button>
  )
}

export default Button
