'use client'
import React from 'react'

export interface StatsProps {
  title?: string | null
  subtitle?: string | null
  items?: Array<{
    id?: string | null
    stat: string
    label: string
    description?: string | null
  }> | null
}

export const StatsBlock: React.FC<StatsProps> = ({ title, subtitle, items }) => {
  if (!items || items.length === 0) return null

  return (
    <section className="py-20 md:py-32 bg-background border-y border-border">
      <div className="container-premium">
        {(title || subtitle) && (
          <div className="max-w-2xl mb-16">
            {title && (
              <h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground mb-4 tracking-tight">
                {title}
              </h2>
            )}
            {subtitle && (
              <p className="text-foreground/70 text-lg sm:text-xl leading-relaxed font-light">
                {subtitle}
              </p>
            )}
          </div>
        )}

        <div className="grid grid-cols-1 md:grid-cols-3 border-t border-l border-border mt-12">
          {items.map((item, index) => (
            <div
              key={item.id || index}
              className="flex flex-col p-8 sm:p-12 border-b border-r border-border hover:bg-foreground/[0.02] transition-colors"
            >
              <div className="font-heading text-5xl lg:text-7xl font-extrabold text-accent mb-4 tracking-tighter">
                {item.stat}
              </div>
              <div className="font-heading text-xl font-bold text-foreground mb-2">
                {item.label}
              </div>
              {item.description && (
                <p className="text-base text-foreground/70 leading-relaxed font-light">
                  {item.description}
                </p>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}