import type { ReactNode } from 'react'

type CTAButtonProps = {
  children: ReactNode
  className?: string
  type?: 'button' | 'submit'
  href?: string
  onClick?: () => void
  disabled?: boolean
}

const baseClassName =
  'bg-primary text-serif text-[12px] md:text-[15px] leading-[140%] tracking-[-0.02em] font-semibold flex items-center gap-2 text-white! px-4 py-3 rounded-md transition-all duration-150 shadow-md hover:shadow-lg'

export function CTAButton({
  children,
  className = '',
  type = 'button',
  href,
  onClick,
  disabled = false,
}: CTAButtonProps) {
  const fullClassName = `${baseClassName} ${disabled ? 'cursor-not-allowed opacity-50' : ''} ${className}`.trim()

  if (href) {
    return (
      <a href={href} className={fullClassName}>
        {children}
      </a>
    )
  }

  return (
    <button type={type} onClick={onClick} disabled={disabled} className={fullClassName}>
      {children}
    </button>
  )
}