import { IconLoader2 as LoaderCircle } from '@tabler/icons-react'
import type { ReactNode } from 'react'

export function Button({
  children,
  busy = false,
  disabled = false,
  onClick,
  type = 'submit',
  secondary = false,
}: {
  children: ReactNode
  busy?: boolean
  disabled?: boolean
  onClick?: () => void
  type?: 'submit' | 'button'
  secondary?: boolean
}) {
  return (
    <button
      type={type}
      onClick={onClick}
      disabled={disabled || busy}
      aria-busy={busy}
      className={`flex min-h-12 w-full items-center justify-center gap-2 rounded-lg px-4 text-base font-semibold tracking-[0.5px] transition-colors disabled:cursor-not-allowed ${secondary ? 'border border-control-border bg-field text-ink hover:bg-elevated' : 'bg-primary text-white hover:bg-primary-hover active:bg-primary-pressed disabled:bg-disabled disabled:text-disabled-ink'}`}
    >
      {busy && <LoaderCircle size={18} className="animate-spin motion-reduce:animate-none" />}
      {children}
    </button>
  )
}