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 px-4',
    md: 'h-12 text-base px-6',
    lg: 'h-14 text-lg px-8',
  }

  return (
    <button
      onClick={onClick}
      className={`
        cursor-pointer 
        rounded-2xl 
        transition-all 
        duration-300 
        font-medium
        shadow-lg
        hover:shadow-2xl
        hover:scale-105
        active:scale-95
        backdrop-blur-sm
        ${sizeClasses[size]} 
        ${className}
      `}
      type={type}
    >
      <div className="flex items-center justify-center gap-2">
        {leftIcon && <span className="flex items-center">{leftIcon}</span>}
        {midIcon && <span className="flex items-center">{midIcon}</span>}
        <span className="text-center">{text}</span>
        {rightIcon && <span className="flex items-center">{rightIcon}</span>}
      </div>
    </button>
  )
}

export default Button