"use client";

import { useState, useEffect } from "react";
import { Package, Clock, CheckCircle, AlertTriangle } from "lucide-react";
import OrderStats from "./order-stats";

interface OrderStatsData {
  totalOrders: number;
  pendingOrders: number;
  completedOrders: number;
  cancelledOrders: number;
}

interface ContentProps {
  username: string;
  orderStats: OrderStatsData;
}

const getGreeting = () => {
  const hour = new Date().getHours();
  if (hour < 12) return "Good morning";
  if (hour < 18) return "Good afternoon";
  return "Good evening";
};

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

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

  const statsConfig = [
    { title: "Total Orders", value: orderStats.totalOrders, icon: Package },
    { title: "Completed Orders", value: orderStats.completedOrders, icon: CheckCircle },
    { title: "Pending Orders", value: orderStats.pendingOrders, icon: Clock },
    { title: "Cancelled Orders", value: orderStats.cancelledOrders, icon: AlertTriangle },
  ];

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
        {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={stat.value.toLocaleString()}
            icon={stat.icon}
          />
        ))}
      </div>
    </div>
  );
}