import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

import styles from '../../../MoneyForCeos/Components/MoneyForCeosChart.module.scss';

const data = [
	{
		name: 'Page A',
		uv: 4000,
		pv: 2400,
		amt: 2400
	},
	{
		name: 'Page B',
		uv: 3000,
		pv: 1398,
		amt: 2210
	},
	{
		name: 'Page C',
		uv: 2000,
		pv: 9800,
		amt: 2290
	},
	{
		name: 'Page D',
		uv: 2780,
		pv: 3908,
		amt: 2000
	},
	{
		name: 'Page E',
		uv: 1890,
		pv: 4800,
		amt: 2181
	},
	{
		name: 'Page F',
		uv: 2390,
		pv: 3800,
		amt: 2500
	},
	{
		name: 'Page G',
		uv: 3490,
		pv: 4300,
		amt: 2100
	}
];

const GrowthStrategyChart = (): JSX.Element => (
	<div>
		<h3 className={styles.title}>Growth Strategy</h3>
		<LineChart
			data={data}
			height={300}
			margin={{
				top: 5,
				right: 30,
				left: 20,
				bottom: 5
			}}
			width={500}
		>
			<CartesianGrid strokeDasharray="3 3" />
			<XAxis dataKey="name" />
			<YAxis />
			<Tooltip />
			<Legend />
			<Line
				activeDot={{
					r: 8
				}}
				dataKey="pv"
				stroke="#8884d8"
				type="monotone"
			/>
			<Line dataKey="uv" stroke="#82ca9d" type="monotone" />
		</LineChart>
	</div>
);

export default GrowthStrategyChart;