import { metrics } from '@renderer/student/mockData'

import { MetricCard } from './MetricCard'

export function MetricsGrid(): React.JSX.Element {
  return (
    <section className="grid grid-cols-[repeat(auto-fit,minmax(170px,1fr))] gap-4">
      {metrics.map((metric) => (
        <MetricCard
          key={metric.title}
          title={metric.title}
          value={metric.value}
          description={metric.description}
          icon={metric.icon}
        />
      ))}
    </section>
  )
}
