import React from 'react';

interface SectionNavigationProps {
    navigationConfig: {
        targetSection: string;
        buttonText: string;
        buttonType: 'goto' | 'back';
        icon?: string;
        description?: string;
    };
    onNavigate: (sectionId: string) => void;
}

function ApuraSectionNavigation({ navigationConfig, onNavigate }: SectionNavigationProps) {
    const { targetSection, buttonText, buttonType, icon, description } = navigationConfig;

    const handleNavigation = () => {
        onNavigate(targetSection);
    };

    const buttonClass = `apura-section-nav-btn apura-section-nav-btn--${buttonType}`;

    return (
        <div className="apura-section-navigation">
            {description && (
                <p className="apura-section-nav-description">{description}</p>
            )}
            <button
                type="button"
                className={buttonClass}
                onClick={handleNavigation}
                aria-label={buttonText}
            >
                {buttonType === 'back' && (
                    <span className="apura-icon-arrow-left" aria-hidden="true">←</span>
                )}
                <span className="apura-section-nav-text">{buttonText}</span>
                {buttonType === 'goto' && (
                    <span className="apura-icon-arrow-right" aria-hidden="true">→</span>
                )}
                {icon && (
                    <span className={`apura-icon ${icon}`} aria-hidden="true"></span>
                )}
            </button>
        </div>
    );
}

export default ApuraSectionNavigation;