"use client";

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

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

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

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

  useEffect(() => {
    const hour = new Date().getHours();
    if (hour < 12) {
      setGreeting("Good morning");
    } else if (hour < 18) {
      setGreeting("Good afternoon");
    } else {
      setGreeting("Good evening");
    }
  }, []);

  return (
    <div className="space-y-6">
      {/* Dynamic Greeting */}
      <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
        {greeting}, {username}!
      </h1>

      {/* Order Stats */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <OrderStats
          title="Total Orders"
          value={orderStats.totalOrders.toLocaleString()}
          icon={Package}
        />
                <OrderStats
          title="Completed Orders"
          value={orderStats.completedOrders.toLocaleString()}
          icon={CheckCircle}
        />
        <OrderStats
          title="Pending Orders"
          value={orderStats.pendingOrders.toLocaleString()}
          icon={Clock}
        />
        <OrderStats
          title="Cancelled Orders"
          value={orderStats.cancelledOrders.toLocaleString()}
          icon={AlertTriangle}
        />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2"></div>
      </div>
    </div>
  );
}