export function MetricGrid({ metrics, minCardWidth = '180px' }) {
  return (
    <section
      style={{
        display: 'grid',
        gridTemplateColumns: `repeat(auto-fit, minmax(${minCardWidth}, 1fr))`,
        gap: '1rem',
      }}
    >
      {metrics.map((item) => (
        <article
          key={item.label}
          style={{
            padding: '1.15rem',
            borderRadius: '22px',
            border: '1px solid var(--color-border)',
            background: '#fff',
          }}
        >
          <span style={{ color: 'var(--color-text-soft)', display: 'block' }}>{item.label}</span>
          <strong style={{ display: 'block', fontSize: '1.4rem', marginTop: '0.45rem' }}>
            {item.value}
          </strong>
          <span style={{ color: 'var(--color-text-soft)', display: 'block', marginTop: '0.45rem' }}>
            {item.detail}
          </span>
        </article>
      ))}
    </section>
  );
}