import { cn } from '@/lib/utils';

interface SecondaryButtonProps {
  children: React.ReactNode;
  href?: string;
  className?: string;
  onClick?: () => void;
}

export default function SecondaryButton({ children, href = '#', className = '', onClick }: SecondaryButtonProps) {
  const baseClasses = 'inline-flex items-center justify-center gap-2 rounded-pill border border-white/30 dark:border-slate-600/50 px-6 py-3 md:px-7 md:py-3.5 text-base font-semibold text-white dark:text-slate-200 hover:bg-white/10 dark:hover:bg-slate-700/50 transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white dark:focus-visible:ring-slate-400 focus-visible:ring-offset-2 focus-visible:ring-offset-brand-bg dark:focus-visible:ring-offset-slate-900';

  if (onClick) {
    return (
      <button
        onClick={onClick}
        className={cn(baseClasses, className)}
      >
        {children}
      </button>
    );
  }

  return (
    <a
      href={href}
      className={cn(baseClasses, className)}
    >
      {children}
    </a>
  );
}