'use client'

export function StakingStats() {
  // TODO: Replace with actual contract reads after codegen
  const stats = [
    { label: 'APY', value: '{{rewardRate}}%' },
    { label: 'Total Staked', value: '—' },
    { label: 'Your Stake', value: '—' },
    { label: 'Pending Rewards', value: '—' },
  ]

  return (
    <div className="grid gap-4 md:grid-cols-4">
      {stats.map((stat) => (
        <div key={stat.label} className="rounded-lg border bg-card p-4">
          <p className="text-sm text-muted-foreground">{stat.label}</p>
          <p className="text-2xl font-bold mt-1">{stat.value}</p>
        </div>
      ))}
    </div>
  )
}