import React from 'react'
import { useMeta } from '../hooks/useContent'
import './StatsCube.css'

export default function StatsCube() {
  const { stats } = useMeta()
  if (!stats?.items || stats.items.length < 4) return null

  const faces = stats.items.slice(0, 4)

  return (
    <section className="cube-section">
      <div className="cube-container">
        {faces.map((stat, i) => (
          <div className={`cube-face face-${i + 1}`} key={i}>
            <div className="cube-stat-value text-gradient">{stat.value}</div>
            <div className="cube-stat-label">{stat.label}</div>
          </div>
        ))}
      </div>
    </section>
  )
}