import clsx from 'clsx'
import { type ButtonHTMLAttributes } from 'react'

import HybridLink, { type Props as HybridLinkProps } from './HybridLink'

const variantStyles = {
  primary:
    'bg-zinc-800 font-semibold text-zinc-100 hover:bg-zinc-700 active:bg-zinc-800 active:text-zinc-100/70 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:active:bg-zinc-700 dark:active:text-zinc-100/70',
  secondary:
    'bg-zinc-50 font-medium text-zinc-900 hover:bg-zinc-100 active:bg-zinc-100 active:text-zinc-900/60 dark:bg-zinc-800/50 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 dark:active:bg-zinc-800/50 dark:active:text-zinc-50/70',
  colored:
    'bg-zinc-800 font-semibold text-zinc-100 hover:bg-teal-500 active:bg-teal-600 hover:text-zinc-900/70 active:text-zinc-100/70',
} as const

const Button = ({
  variant = 'primary',
  className,
  ...props
}: (ButtonHTMLAttributes<HTMLButtonElement> | HybridLinkProps) & {
  variant?: keyof typeof variantStyles
}) => {
  className = clsx(
    'inline-flex items-center gap-2 justify-center rounded-md py-2 px-3 text-sm outline-offset-2 transition active:transition-none',
    variantStyles[variant],
    className,
  )

  return 'href' in props ? (
    <HybridLink className={className} {...props} href={props.href} />
  ) : (
    <button className={className} {...props} />
  )
}

export default Button