import { LayoutDashboardIcon, Target } from 'lucide-react';
import { Link } from 'react-router-dom';

type ToolsWhatIsNextProps = {
	prevAction?: {
		title: string;
		content: string;
		link: string;
	};
	nextAction?: {
		title: string;
		content: string;
		link: string;
	};
};

const ToolsWhatIsNext = ({ prevAction, nextAction }: ToolsWhatIsNextProps) => (
	<>
		<p>
			<p style={{ textAlign: 'center' }}>
				<b>What’s next?</b>
			</p>
			<table style={{ margin: '20px 0 50px 0' }}>
				<tr>
					{prevAction && (
						<td align="left">
							<p style={{ fontStyle: 'italic' }}>{prevAction.content}</p>
							<Link to={prevAction.link} className="toolsNavLink">
								<Target size={16} /> {prevAction.title}
							</Link>
						</td>
					)}
					{nextAction && (
						<td align="right">
							<p
								style={{ fontStyle: 'italic' }}
								dangerouslySetInnerHTML={{ __html: nextAction.content }}
							/>
							<Link to={nextAction.link} className="toolsNavLink right">
								<LayoutDashboardIcon size={16} /> {nextAction.title}
							</Link>
						</td>
					)}
				</tr>
			</table>
		</p>
	</>
);

export default ToolsWhatIsNext;