// Statistics cards component displaying total events, tools, agents, and sessions

import React from 'react';
import type { Statistics } from '../types';

interface StatisticsCardsProps {
  statistics: Statistics | null;
}

export const StatisticsCards: React.FC<StatisticsCardsProps> = ({ statistics }) => {
  const stats = statistics || {
    total_events: 0,
    total_tools_used: 0,
    total_agents: 0,
    total_sessions: 0,
  };

  return (
    <div className="statistics-grid">
      <div className="stat-card">
        <div className="stat-label">TOTAL EVENTS</div>
        <div className="stat-value cyan">{stats.total_events}</div>
      </div>

      <div className="stat-card">
        <div className="stat-label">TOOLS USED</div>
        <div className="stat-value green">{stats.total_tools_used}</div>
      </div>

      <div className="stat-card">
        <div className="stat-label">AGENTS</div>
        <div className="stat-value magenta">{stats.total_agents}</div>
      </div>

      <div className="stat-card">
        <div className="stat-label">SESSIONS</div>
        <div className="stat-value yellow">{stats.total_sessions}</div>
      </div>
    </div>
  );
};

export default StatisticsCards;
