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:
    'bg-blue-500 text-white hover:bg-blue-400',
  secondary:
    'border border-white/10 bg-white/[0.04] text-slate-200 hover:bg-white/[0.08]',
  danger:
    'border border-red-500/20 bg-red-500/10 text-red-300 hover:bg-red-500/20',
};

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