import { JSX } from "react";
import { Heading, VStack } from "@chakra-ui/react";
import LineChartComponent from "@/components/charts/LineChart";
import { LineChartArr } from "@/types/LineChartStats";

interface CommandResponsesChartProps {
  lineChartData: LineChartArr;
}

const CommandResponsesChart = ({
  lineChartData
}: CommandResponsesChartProps): JSX.Element => {
  return (
    <VStack gap={6} w="100%">
      <Heading as="h4" fontSize="2xl">{`Commands Responded To`}</Heading>
      <LineChartComponent data={lineChartData} label="Command Responses" />
    </VStack>
  );
};

export default CommandResponsesChart;
