import React from 'react'
import ReactApexChart from 'react-apexcharts'
import './styles.css'

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: [
      {
        name: 'us-east-1',
        data: [
          142,
          138,
          155,
          149,
          151,
          144,
          139,
          null,
          null,
          null,
          158,
          162,
          147,
          150,
          141,
          146,
        ],
      },
      {
        name: 'eu-west-1',
        data: [
          210,
          225,
          null,
          218,
          null,
          208,
          215,
          228,
          null,
          null,
          219,
          null,
          224,
          null,
          null,
          null,
        ],
      },
      {
        name: 'ap-south-1',
        data: [
          null,
          null,
          null,
          null,
          296,
          301,
          288,
          295,
          302,
          310,
          318,
          324,
          305,
          null,
          null,
          null,
        ],
      },
    ],
    options: {
      chart: {
        height: 350,
        type: 'line',
        zoom: {
          enabled: false,
        },
        animations: {
          enabled: false,
        },
      },
      stroke: {
        width: [5, 5, 4],
        curve: 'smooth',
      },
      labels: [
        '2025-06-04T00:00:00',
        '2025-06-04T01:00:00',
        '2025-06-04T02:00:00',
        '2025-06-04T03:00:00',
        '2025-06-04T04:00:00',
        '2025-06-04T05:00:00',
        '2025-06-04T06:00:00',
        '2025-06-04T07:00:00',
        '2025-06-04T08:00:00',
        '2025-06-04T09:00:00',
        '2025-06-04T10:00:00',
        '2025-06-04T11:00:00',
        '2025-06-04T12:00:00',
        '2025-06-04T13:00:00',
        '2025-06-04T14:00:00',
        '2025-06-04T15:00:00',
      ],
      title: {
        text: 'API Response Time by Region',
      },
      subtitle: {
        text: 'Monitoring dropouts (null values) render as gaps',
      },
      xaxis: {
        type: 'datetime',
        labels: {
          format: 'HH:mm',
        },
      },
      yaxis: {
        labels: {
          formatter: function (val) {
            return val + ' ms'
          },
        },
      },
    },
  })

  return (
    <div>
      <div id="chart">
        <ReactApexChart
          options={state.options}
          series={state.series}
          type="line"
          height={350}
        />
      </div>
    </div>
  )
}

export default ApexChart