/* eslint-disable react/prop-types */
import { Card, Col, Row } from 'react-bootstrap';
import { FaDownload, FaUpload, FaTachometerAlt } from 'react-icons/fa';

const AverageData = ({ data, theme }) => {
  const average = {
    download: 0,
    upload: 0,
    ping: 0,
  };

  if (data.length > 0) {
    // Menghitung rata-rata download, upload, dan ping
    average.download = data.reduce((acc, item) =>
      item.data && item.data.download ? acc + item.data.download.bandwidth : acc, 0) / data.length;

    average.upload = data.reduce((acc, item) =>
      item.data && item.data.upload ? acc + item.data.upload.bandwidth : acc, 0) / data.length;

    average.ping = data.reduce((acc, item) =>
      item.data && item.data.ping ? acc + item.data.ping.latency : acc, 0) / data.length;
  }

  return (
    <Row>
      <Col md={4}>
        <Card className={`card ${theme} mb-4 shadow-sm`}>
          <Card.Header as="h6">
            <FaDownload style={{ marginRight: '10px', width: '15px', color: '#28a745' }} />
            Average Download
          </Card.Header>
          <Card.Body>
            <Card.Title as="h4">{(average.download / 1000000).toFixed(2)} Mbps</Card.Title>
          </Card.Body>
        </Card>
      </Col>
      <Col md={4}>
        <Card className={`card ${theme} mb-4 shadow-sm`}>
          <Card.Header as="h6">
            <FaUpload style={{ marginRight: '10px', width: '15px', color: '#00bcd4' }} />
            Average Upload
          </Card.Header>
          <Card.Body>
            <Card.Title as="h4">{(average.upload / 1000000).toFixed(2)} Mbps</Card.Title>
          </Card.Body>
        </Card>
      </Col>
      <Col md={4}>
        <Card className={`card ${theme} mb-4 shadow-sm`}>
          <Card.Header as="h6">
            <FaTachometerAlt style={{ marginRight: '10px', width: '15px', color: '#ffc107' }} />
            Average Ping
          </Card.Header>
          <Card.Body>
            <Card.Title as="h4">{average.ping.toFixed(1)} ms</Card.Title>
          </Card.Body>
        </Card>
      </Col>
    </Row>
  );
};

export default AverageData;