import React from 'react';

function StatCard({ label, value, color = 'accent', variant, onClick, active }) {
  const cardClasses = [
    'stat-card',
    onClick && 'stat-card--clickable',
    active && 'stat-card--active',
    variant && `stat-card--${variant}`,
  ].filter(Boolean).join(' ');

  const valueClass = `stat-card__value stat-card__value--${color}`;

  return (
    <div
      className={cardClasses}
      onClick={onClick}
      role={onClick ? 'button' : undefined}
      tabIndex={onClick ? 0 : undefined}
      aria-label={`${label}: ${value}`}
    >
      <div className="stat-card__label">{label}</div>
      <div className={valueClass}>{value}</div>
    </div>
  );
}

export default function StatsBar({ totalCVEs, vendorEntries, openTickets, criticalCount, onFilterSeverity, activeSeverity }) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
      <StatCard
        label="Total CVEs"
        value={totalCVEs}
        color="accent"
        onClick={() => onFilterSeverity && onFilterSeverity('All Severities')}
        active={activeSeverity === 'All Severities'}
      />
      <StatCard
        label="Vendor Entries"
        value={vendorEntries}
        color="neutral"
      />
      <StatCard
        label="Open Tickets"
        value={openTickets}
        color="warning"
        variant="warning"
      />
      <StatCard
        label="Critical"
        value={criticalCount}
        color="danger"
        variant="danger"
        onClick={() => onFilterSeverity && onFilterSeverity(activeSeverity === 'Critical' ? 'All Severities' : 'Critical')}
        active={activeSeverity === 'Critical'}
      />
    </div>
  );
}