import { MetricCard } from '@/components/card/MetricCard';
import { OVERVIEW_STATS } from '../constants/performance';

export function OverviewStatsSection() {
  return (
    <section className="py-10 px-6">
      <div className="max-w-6xl mx-auto">
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
          {OVERVIEW_STATS.map((stat) => (
            <MetricCard
              key={stat.label}
              label={stat.label}
              value={stat.value}
              subtext={stat.delta}
              trend={stat.positive ? 'up' : 'down'}
            />
          ))}
        </div>
      </div>
    </section>
  );
}