import React from 'react';
import { formatCurrency } from '@/lib/utils';
import type { SessionStats as SessionStatsType } from '@/services/session/sessionService';

interface SessionStatsProps {
  readonly stats: SessionStatsType;
}

const SessionStats = ({ stats }: SessionStatsProps) => {
  return (
    <div className="grid grid-cols-2 gap-8 rounded-lg bg-gradient-to-r from-blue-50 to-indigo-50 p-4 dark:from-gray-800 dark:to-gray-700 md:grid-cols-5">
      <div className="text-center">
        <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">{stats.total}</div>
        <div className="text-xs text-gray-600 dark:text-gray-300">Total Sessions</div>
      </div>
      <div className="text-center">
        <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">{stats.completed}</div>
        <div className="text-xs text-gray-600 dark:text-gray-300">Completed</div>
      </div>
      <div className="text-center">
        <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
          {Math.round((stats.totalEnergy / 1000) * 100) / 100}
        </div>
        <div className="text-xs text-gray-600 dark:text-gray-300">kWh Used</div>
      </div>
      <div className="text-center">
        <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
          {formatCurrency(stats.totalSpent)}
        </div>
        <div className="text-xs text-gray-600 dark:text-gray-300">Total Spent</div>
      </div>
      <div className="text-center">
        <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
          {formatCurrency(stats.averageCost)}
        </div>
        <div className="text-xs text-gray-600 dark:text-gray-300">Avg. Cost</div>
      </div>
    </div>
  );
};

export default SessionStats;