'use client'

import Link from 'next/link'
import { forwardRef } from 'react'
import { cn } from '@/lib/utils'

type ButtonVariant = 'default' | 'ghost' | 'ghost-light' | 'light' | 'text' | 'text-light'
type ButtonSize = 'small' | 'default' | 'large'

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant
  size?: ButtonSize
  rounded?: boolean
  href?: string
  children: React.ReactNode
}

const baseStyles = `
  relative inline-block
  font-heading uppercase
  tracking-[2.5px] text-[0.9em] leading-[1.8em]
  transition-all duration-500
  cursor-pointer
  border-2
`

const sizeStyles: Record<ButtonSize, string> = {
  small: "px-[33px] py-[6px] text-[0.75em]",
  default: "px-[38px] py-[8px]",
  large: "px-[54px] py-[10px] text-[1.1em] tracking-[3px]",
}

const variantStyles: Record<ButtonVariant, string> = {
  default: "bg-dark text-light border-dark hover:bg-[#2f2f2f] hover:border-[#2f2f2f]",
  ghost: "bg-transparent text-dark border-dark hover:bg-dark hover:text-light",
  'ghost-light': "bg-transparent text-white border-white hover:bg-white hover:text-dark",
  light: "bg-light text-dark border-light hover:bg-[#bebebe] hover:border-[#bebebe]",
  text: "bg-transparent text-gray border-transparent hover:text-dark hover:border-dark",
  'text-light': "bg-transparent text-gray-light border-transparent hover:text-white hover:border-white",
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ variant = 'default', size = 'default', rounded = false, href, className, children, ...props }, ref) => {
    const classes = cn(
      baseStyles,
      sizeStyles[size],
      variantStyles[variant],
      rounded && 'rounded-[25px]',
      className
    )

    if (href) {
      return (
        <Link href={href} className={classes}>
          {children}
        </Link>
      )
    }

    return (
      <button ref={ref} className={classes} {...props}>
        {children}
      </button>
    )
  }
)

Button.displayName = 'Button'
