import type { ButtonHTMLAttributes } from 'react';

import { clsx } from 'clsx';

type ButtonVariant =
  | 'primary'
  | 'secondary'
  | 'danger';

type ButtonProps =
  ButtonHTMLAttributes<HTMLButtonElement> & {
    variant?: ButtonVariant;
  };

const variants: Record<ButtonVariant, string> = {
  primary:
    'border border-white/10 bg-white/[0.035] text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] hover:border-blue-400/30 hover:bg-blue-500/10 hover:text-blue-50',

  secondary:
    'border border-white/10 bg-white/[0.02] text-slate-200 hover:bg-white/[0.05] hover:text-white',

  danger:
    'border border-red-500/20 bg-red-500/10 text-red-300 hover:border-red-400/30 hover:bg-red-500/20 hover:text-red-100',
};

export function Button({
  className,
  children,
  variant = 'primary',
  ...props
}: ButtonProps) {
  return (
    <button
      {...props}
      className={clsx(
        'inline-flex items-center justify-center gap-2 rounded-2xl px-4 py-3 text-sm font-black tracking-[-0.01em] transition-all duration-200 disabled:cursor-not-allowed disabled:opacity-50',
        'backdrop-blur-sm',
        variants[variant],
        className,
      )}
    >
      {children}
    </button>
  );
}