import React from 'react'
import { AreaChart as _AreaChart, XAxis, YAxis, CartesianGrid, Tooltip, Area } from 'recharts'

export const AreaChart = (props) => {
  return (<_AreaChart width={500} height={100} data={props.data}
    margin={{ margin: 0 }}>
    <defs>
      <linearGradient id="colorDefinition" x1="0" y1="0" x2="0" y2="1">
        <stop offset="5%" stopColor={props.areaStartColor} stopOpacity={0.75} />
        <stop offset="95%" stopColor={props.areaStopColor} stopOpacity={0.75} />
      </linearGradient>
    </defs>
    {/* <XAxis dataKey="name" /> */}
    {/* <YAxis /> */}
    <CartesianGrid strokeDasharray="3 3" />
    {/* <Tooltip /> */}
    <Area type="monotone" dataKey="value" stroke={props.areaStokeColor} fillOpacity={1} fill="url(#colorDefinition)" />
  </_AreaChart>
  )
}

AreaChart.defaultProps = {
  areaStartColor: "var(--colorBlueDark)",
  areaStopColor: "var(--colorBlueDark)",
  areaStrokeColor: "var(--colorWhiteBase)"
}