import React from 'react';
import { useAuth } from '../contexts/AuthContext';

interface AuthButtonProps {
  mode: 'login' | 'signup';
  className?: string;
  children: React.ReactNode;
  asLink?: boolean;
  style?: React.CSSProperties;
}

const AuthButton: React.FC<AuthButtonProps> = ({ mode, className = '', children, asLink = false, style }) => {
  const { openAuthModal } = useAuth();

  const handleClick = (e: React.MouseEvent) => {
    e.preventDefault();
    openAuthModal(mode);
  };

  if (asLink) {
    return (
      <a
        href="#"
        onClick={handleClick}
        className={className}
        style={style}
      >
        {children}
      </a>
    );
  }

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

export default AuthButton;
