import { Link } from 'react-router-dom';
import styles from './ToolsBottomNavigation.module.scss';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import PrintSVG from '../../../Components/UI/Icons/PrintSVG';

type ToolsBottomNavigationProps = {
	stepNumber: number;
	maxSteps: number;
	nextAction?: {
		link: string;
		title: string;
	};
	prevAction?: {
		link: string;
		title: string;
	};
	reportGenerated?: (e: any) => void;
};

const ToolsBottomNavigation = ({
	stepNumber,
	maxSteps,
	nextAction,
	prevAction,
	reportGenerated
}: ToolsBottomNavigationProps) => {
	const date = new Date();
	const today = date.toLocaleDateString();
	const time = date.toLocaleTimeString();

	return (
		<div className={styles.footerNavigation}>
			<div>
				{prevAction && (
					<Link to={prevAction.link}>
						<ChevronLeft size={16} /> {prevAction.title}
					</Link>
				)}
			</div>
			<div>
				Step {stepNumber} of {maxSteps}
			</div>
			{nextAction && (
				<div>
					<Link to={nextAction.link}>
						{nextAction.title} <ChevronRight size={16} />
					</Link>
				</div>
			)}
			{reportGenerated && (
				<div>
					<div className={styles.reportGenerated}>
						Report generated {today}{' '}
						<Link
							className={styles.printResult}
							// to={environment.frontendRoutes.generatePdf}
							to="#"
							onClick={reportGenerated}
						>
							{/* <small>Print report</small> */}
							<PrintSVG className={styles.printIcon} />
						</Link>
					</div>
				</div>
			)}
		</div>
	);
};

export default ToolsBottomNavigation;