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-red-500/20 hover:bg-[#b60014]',
    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>;
};