import React from 'react'
import styles from './RequestBreakdown.module.css'

interface RequestDataSummaryProps {
  totalRequests: number
  totalSize: number
  averageResponseTime: number
  successRate: number
  cacheHitRate: number
}

const RequestDataSummary: React.FC<RequestDataSummaryProps> = ({
  totalRequests,
  totalSize,
  averageResponseTime,
  successRate,
  cacheHitRate
}) => {
  const formatSize = (bytes: number): string => {
    if (bytes < 1024) return `${bytes} B`
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
    return `${(bytes / 1024 / 1024).toFixed(1)} MB`
  }

  const formatDuration = (microseconds: number): string => {
    if (microseconds < 1000) return `${microseconds.toFixed(0)} μs`
    if (microseconds < 1000000) return `${(microseconds / 1000).toFixed(1)} ms`
    return `${(microseconds / 1000000).toFixed(2)} s`
  }

  return (
    <div className={styles.statsGrid}>
      <div className={styles.statCard}>
        <h3>Total Requests</h3>
        <div className={styles.statValue}>{totalRequests}</div>
      </div>
      <div className={styles.statCard}>
        <h3>Total Size</h3>
        <div className={styles.statValue}>{formatSize(totalSize)}</div>
      </div>
      <div className={styles.statCard}>
        <h3>Average Response Time</h3>
        <div className={styles.statValue}>{formatDuration(averageResponseTime)}</div>
      </div>
      <div className={styles.statCard}>
        <h3>Success Rate</h3>
        <div className={styles.statValue}>{successRate.toFixed(1)}%</div>
      </div>
      <div className={styles.statCard}>
        <h3>Cache Hit Rate</h3>
        <div className={styles.statValue}>{cacheHitRate.toFixed(1)}%</div>
      </div>
    </div>
  )
}

export default RequestDataSummary