'use client';
import { type ReactNode } from "react";

interface ButtonProps {
  children: ReactNode;
  onClick?: () => void;
  href?: string;
  variant?: "primary" | "secondary";
  className?: string;
  isNavyBg?: boolean;
}

export const Button = ({
  children,
  onClick,
  href,
  variant = "primary",
  className = "",
  isNavyBg = false,
}: ButtonProps) => {
  const base =
    "inline-flex items-center gap-3 px-8 py-4 text-base font-bold transition hover:scale-[1.02] cursor-pointer";

  const styles = {
    primary:
      "bg-brand-red text-white shadow-lg shadow-blue-500/20 hover:bg-[#2563eb]",
    secondary: isNavyBg
      ? "border border-white/15 bg-white/5 text-white hover:bg-white/10"
      : "border border-brand-navy/15 text-brand-navy hover:border-brand-blue hover:text-brand-blue",
  };

  const cls = `${base} ${styles[variant]} ${className}`;

  if (href) {
    return (
      <a href={href} className={cls}>
        {children}
      </a>
    );
  }

  return (
    <button onClick={onClick} className={cls}>
      {children}
    </button>
  );
};