/* eslint-disable react/destructuring-assignment */
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

const WorkingCapitalChart = (props: {
	dataOne: number;
	dataTwo: number;
	firstDate: string;
	secondDate: string;
}): JSX.Element => (
	<LineChart
		data={[
			{
				name: props.firstDate,
				'Marginal Cashflow': props.dataOne,
				amt: 0.5
			},
			{
				name: props.secondDate,
				'Marginal Cashflow': props.dataTwo,
				amt: 10
			}
		]}
		height={200}
		width={400}
	>
		<CartesianGrid strokeDasharray="3 3" />
		<XAxis
			dataKey="name"
			padding={{
				left: 30,
				right: 30
			}}
		/>
		<YAxis />
		<Tooltip />
		<Line dataKey="Marginal Cashflow" stroke="#82ca9d" type="monotone" />
	</LineChart>
);

export default WorkingCapitalChart;