import React from 'react'

type Stat = {
  value: string
  label: string
}

type StatsStripProps = {
  stats?: Stat[]
}

export function StatsStripBlock({ stats }: StatsStripProps) {
  if (!Array.isArray(stats) || stats.length === 0) return null

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 border-b border-t border-foreground/8">
      {stats.map((stat, i) => (
        <div
          key={i}
          className={`px-6 py-5 ${i % 2 === 0 ? 'border-r border-foreground/8' : ''} ${
            i < 2 ? 'border-b md:border-b-0 border-foreground/8' : ''
          } ${i < stats.length - 1 ? 'md:border-r md:border-foreground/8' : ''}`}
        >
          <p className="text-2xl font-medium text-foreground">{stat.value}</p>
          <p className="text-xs text-foreground/30 mt-1">{stat.label}</p>
        </div>
      ))}
    </div>
  )
}