'use client'

interface Stat {
  id: string
  label: string
  value: string
  unit?: string
}

interface StatsProps {
  stats?: Stat[]
}

const defaultStats: Stat[] = [
  { id: 'portfolios', label: 'Portfolios Hosted', value: '10,000+' },
  { id: 'uptime', label: 'Uptime Guarantee', value: '99.9%' },
  { id: 'users', label: 'Active Users', value: '50,000+' },
  { id: 'time', label: 'Average Deploy Time', value: '<30s' },
]

export default function Stats({ stats = defaultStats }: StatsProps) {
  return (
    <section className="py-16 md:py-24 bg-gradient-to-r from-purple-600 to-pink-600 text-white">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Trusted by Creators</h2>
          <p className="text-lg text-white/80">
            Portfolio Host is the platform of choice for creative professionals
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {stats.map((stat) => (
            <div key={stat.id} className="text-center">
              <div className="text-4xl md:text-5xl font-bold mb-2">{stat.value}</div>
              <p className="text-lg text-white/80">{stat.label}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}