import { Card } from "antd";
import { Area, CartesianGrid, ComposedChart, Legend, Line, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
import CustomTooltip from "./chart-custom-tooltip";

const graphProps = {
  strokeWidth: 3
};

export default function ScoreboardTimeTicketsChart({ data, chartTitle }) {
  return (
    <Card title={chartTitle}>
      <ResponsiveContainer width="100%" height={275} minHeight={100}>
        <ComposedChart data={data} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
          <CartesianGrid stroke="#f5f5f5" />
          <XAxis dataKey="date" strokeWidth={graphProps.strokeWidth} />
          <YAxis yAxisId="left" strokeWidth={graphProps.strokeWidth} />
          <Tooltip content={<CustomTooltip />} />
          <Legend />
          <Line
            name="Target Hours"
            type="monotone"
            dataKey="accTargetHrs"
            stroke="#ff7300"
            yAxisId="left"
            strokeWidth={graphProps.strokeWidth}
          />

          <Area type="monotone" name="MTD Hours" dataKey="accHrs" fill="lightblue" stroke="blue" yAxisId="left" />
        </ComposedChart>
      </ResponsiveContainer>
    </Card>
  );
}
