/**
 * components/ui/Button.tsx
 * Reusable button component — professional institutional style.
 */

"use client";

import { type ButtonHTMLAttributes, type ReactNode } from "react";
import { clsx } from "clsx";
import { Loader2 } from "lucide-react";

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
  size?: "sm" | "md" | "lg";
  loading?: boolean;
  leftIcon?: ReactNode;
  rightIcon?: ReactNode;
  fullWidth?: boolean;
}

const variants = {
  primary:
    "bg-indigo-600 text-white hover:bg-indigo-700 shadow-xl shadow-indigo-600/20 active:scale-95",
  secondary:
    "bg-slate-50 text-slate-900 hover:bg-slate-100 border border-slate-100 shadow-sm active:scale-95",
  outline:
    "border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-600 hover:text-white bg-transparent active:scale-95",
  ghost: "text-slate-400 hover:text-indigo-600 bg-transparent active:scale-95",
  danger:
    "bg-rose-50 text-rose-600 border border-rose-100 hover:bg-rose-600 hover:text-white active:scale-95",
};

const sizes = {
  sm: "px-5 py-2.5 text-[9px] rounded-xl font-black tracking-widest",
  md: "px-8 py-3.5 text-[10px] rounded-2xl font-black tracking-[0.15em]",
  lg: "px-10 py-4 text-[11px] rounded-[1.25rem] font-black tracking-[0.2em]",
};

export function Button({
  variant = "primary",
  size = "md",
  loading = false,
  leftIcon,
  rightIcon,
  children,
  className,
  disabled,
  fullWidth,
  ...props
}: ButtonProps) {
  return (
    <button
      className={clsx(
        "inline-flex items-center justify-center gap-3 transition-all duration-500 uppercase",
        "disabled:opacity-30 disabled:cursor-not-allowed",
        variants[variant],
        sizes[size],
        fullWidth && "w-full",
        className
      )}
      disabled={disabled || loading}
      {...props}
    >
      {loading ? (
        <Loader2 className="h-3.5 w-3.5 animate-spin" />
      ) : (
        leftIcon && <span className="flex-shrink-0 transition-transform group-hover:scale-110">{leftIcon}</span>
      )}
      <span className="relative z-10">{children}</span>
      {!loading && rightIcon && (
        <span className="flex-shrink-0 transition-transform group-hover:translate-x-0.5">{rightIcon}</span>
      )}
    </button>
  );
}