import { forwardRef } from 'react'
import type { ButtonHTMLAttributes, AnchorHTMLAttributes } from 'react'

type Variant = 'primary' | 'secondary' | 'ghost'

const base =
  'inline-flex items-center justify-center gap-2 font-body font-semibold rounded-full transition-all duration-300 active:scale-95 disabled:opacity-60 disabled:cursor-not-allowed'

const sizes = {
  sm: 'px-4 py-2 text-sm',
  md: 'px-7 py-3 text-base',
  lg: 'px-8 py-3.5 text-base',
}

const variants: Record<Variant, string> = {
  primary:
    'bg-purple-deep text-white shadow-cta hover:bg-purple-primary hover:shadow-cta-hover',
  secondary:
    'border-2 border-purple-deep text-purple-deep bg-transparent hover:bg-purple-deep hover:text-white',
  ghost:
    'text-purple-deep hover:bg-purple-soft',
}

type CommonProps = {
  variant?: Variant
  size?: keyof typeof sizes
}

export type ButtonProps = CommonProps &
  ButtonHTMLAttributes<HTMLButtonElement> & { as?: 'button' }
export type AnchorProps = CommonProps &
  AnchorHTMLAttributes<HTMLAnchorElement> & { as: 'a'; href: string }

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ variant = 'primary', size = 'md', className = '', ...rest }, ref) => (
    <button
      ref={ref}
      className={`${base} ${sizes[size]} ${variants[variant]} ${className}`}
      {...rest}
    />
  )
)
Button.displayName = 'Button'

export function ButtonLink({
  variant = 'primary',
  size = 'md',
  className = '',
  ...rest
}: AnchorProps) {
  return (
    <a
      className={`${base} ${sizes[size]} ${variants[variant]} ${className}`}
      {...rest}
    />
  )
}
