import { Button } from '@chakra-ui/react'

interface CustomButtonProps {
  children: React.ReactNode
  onClick?: () => void
  variant?: 'primary' | 'secondary'
  size?: 'sm' | 'md' | 'lg'
}

export const CustomButton = ({ 
  children, 
  onClick, 
  variant = 'primary',
  size = 'md' 
}: CustomButtonProps) => {
  // Primary button - Green/Teal with shadow
  const primaryStyles = {
    bg: 'linear-gradient(135deg, #4ade80 0%, #22c55e 100%)',
    color: 'white',
    fontWeight: 'bold',
    fontSize: size === 'sm' ? '14px' : size === 'md' ? '16px' : '18px',
    px: size === 'sm' ? 6 : size === 'md' ? 8 : 10,
    py: size === 'sm' ? 5 : size === 'md' ? 6 : 7,
    rounded: 'full',
    boxShadow: '0 10px 30px rgba(34, 197, 94, 0.4), 0 4px 15px rgba(34, 197, 94, 0.3)',
    _hover: {
      bg: 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)',
      boxShadow: '0 12px 35px rgba(34, 197, 94, 0.5), 0 6px 20px rgba(34, 197, 94, 0.4)',
      transform: 'translateY(-2px)',
    },
    _active: {
      transform: 'translateY(0)',
      boxShadow: '0 8px 25px rgba(34, 197, 94, 0.3), 0 3px 12px rgba(34, 197, 94, 0.2)',
    },
    transition: 'all 0.3s ease',
  }

  // Secondary button - Blue with shadow
  const secondaryStyles = {
    bg: 'linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)',
    color: 'white',
    fontWeight: 'bold',
    fontSize: size === 'sm' ? '14px' : size === 'md' ? '16px' : '18px',
    px: size === 'sm' ? 6 : size === 'md' ? 8 : 10,
    py: size === 'sm' ? 5 : size === 'md' ? 6 : 7,
    rounded: 'full',
    boxShadow: '0 10px 30px rgba(59, 130, 246, 0.4), 0 4px 15px rgba(59, 130, 246, 0.3)',
    _hover: {
      bg: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
      boxShadow: '0 12px 35px rgba(59, 130, 246, 0.5), 0 6px 20px rgba(59, 130, 246, 0.4)',
      transform: 'translateY(-2px)',
    },
    _active: {
      transform: 'translateY(0)',
      boxShadow: '0 8px 25px rgba(59, 130, 246, 0.3), 0 3px 12px rgba(59, 130, 246, 0.2)',
    },
    transition: 'all 0.3s ease',
  }

  const buttonStyles = variant === 'primary' ? primaryStyles : secondaryStyles

  return (
    <Button
      onClick={onClick}
      {...buttonStyles}
    >
      {children}
    </Button>
  )
}

// Example usage component
export const CustomButtonDemo = () => {
  return (
    <div style={{ padding: '40px', display: 'flex', gap: '20px', flexWrap: 'wrap', background: '#f5f5f5' }}>
      {/* Primary buttons */}
      <CustomButton variant="primary" size="sm">
        Small Button
      </CustomButton>
      <CustomButton variant="primary" size="md">
        Medium Button
      </CustomButton>
      <CustomButton variant="primary" size="lg">
        Large Button
      </CustomButton>
      
      {/* Secondary buttons */}
      <CustomButton variant="secondary" size="sm">
        Small Button
      </CustomButton>
      <CustomButton variant="secondary" size="md">
        Medium Button
      </CustomButton>
      <CustomButton variant="secondary" size="lg">
        Large Button
      </CustomButton>
    </div>
  )
}

export default CustomButton