"use client"

import { useState, useEffect } from "react"
import OrderStats from "./order-stats"
import { getGreeting } from "@/lib/utils"
import { statsConfig } from "@/config/dashboard"
import type { OrderStatsData } from "@/lib/types"

interface ContentProps {
  username: string
  orderStats: OrderStatsData
}

export default function Content({ username, orderStats }: ContentProps) {
  const [greeting, setGreeting] = useState("")

  useEffect(() => {
    setGreeting(getGreeting())
  }, [])

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-semibold text-foreground">
        {greeting}, {username}!
      </h1>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {statsConfig.map((stat) => (
          <OrderStats
            key={stat.title}
            title={stat.title}
            value={orderStats[stat.key as keyof OrderStatsData].toLocaleString()}
            icon={stat.icon}
          />
        ))}
      </div>
    </div>
  )
}