import React from 'react';
import type { ReactNode } from 'react';
import './NavigationButton.css';

interface NavigationButtonProps {
  children: ReactNode;
  onClick?: () => void;
  disabled?: boolean;
  className?: string;
  title?: string;
  direction?: 'previous' | 'next' | 'none';
}

export const NavigationButton: React.FC<NavigationButtonProps> = ({
  children,
  onClick,
  disabled = false,
  className = '',
  title,
  direction = 'none',
}) => {
  const baseClasses = 'nav-button';
  const directionClass = direction !== 'none' ? `nav-button-${direction}` : '';
  
  const classes = [
    baseClasses,
    directionClass,
    className
  ].filter(Boolean).join(' ');

  return (
    <button
      type="button"
      className={classes}
      onClick={onClick}
      disabled={disabled}
      title={title}
    >
      {children}
    </button>
  );
};