import { Link } from 'react-router-dom';
import styles from './ToolsTitleNavigation.module.scss';
import { ChevronLeft, ChevronRight } from 'lucide-react';

type ToolsTitleNavigationProps = {
	title: string;
	stepNumber: number;
	maxSteps: number;
	nextAction?: {
		link: string;
		title: string;
	};
	prevAction?: {
		link: string;
		title: string;
	};
	introText?: string;
};

const ToolsTitleNavigation = ({
	title,
	stepNumber,
	maxSteps,
	prevAction,
	nextAction,
	introText
}: ToolsTitleNavigationProps) => (
	<div className={styles.title}>
		<h4>
			{title}
			<span>
				Step {stepNumber} of {maxSteps}
				{prevAction && (
					<>
						<span className="separator">|</span>
						<Link to={prevAction.link}>
							<ChevronLeft size={16} color="black" />
							{prevAction.title}
						</Link>
					</>
				)}
				{nextAction && (
					<>
						<span className="separator">|</span>
						<Link to={nextAction.link}>
							{nextAction.title}
							<ChevronRight size={16} color="black" />
						</Link>
					</>
				)}
			</span>
		</h4>
		{introText && <p className={styles.introText}>{introText}</p>}
	</div>
);

export default ToolsTitleNavigation;