import React from 'react';
import {ucFirst} from "../../utils/ProgressTrackerUtils";

interface PartType {
    ref: string;
    name: string;
}

interface PTNavTabsProps {
    partTypes: PartType[];
    activeTabIndex: number;
    onTabChange: (index: number) => void;
}

export const PTNavTabs = ({
    partTypes,
    activeTabIndex,
    onTabChange
}: PTNavTabsProps) => {
    return (
        <div id="tabs">
            <div id="ops_page_tabs" className="">
                {partTypes.map((type, index) => (
                    <a
                        key={type.ref}
                        className={`ops_page_tabs_item ${activeTabIndex === index ? 'context ops_page_tabs_item_active' : 'navigation'}`}
                        href="#"
                        onClick={(e) => {
                            e.preventDefault();
                            onTabChange(index);
                        }}
                    >
                        {ucFirst(type.name)}
                    </a>
                ))}
                <div className="ops_page_breadcrumbs_post"></div>
            </div>
        </div>
    );
};

export default PTNavTabs;
