import React from "react";
import { Clock, CheckCircle2, ShoppingBag } from "lucide-react";
import type { OrderAnalytics } from "@/types";

import OrdersAnalyticsSkeleton from "@/components/skeletons/OrdersAnalyticsSkeleton";

interface OrdersAnalyticsProps {
  analytics: OrderAnalytics;
  loading?: boolean;
}

export function OrdersAnalytics({ analytics, loading = false }: OrdersAnalyticsProps) {
  if (loading) {
    return <OrdersAnalyticsSkeleton />;
  }
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
      <div className="bg-white border border-zinc-200 rounded-2xl p-6 shadow-xs flex items-center gap-4">
        <div className="w-12 h-12 rounded-xl bg-amber-50 flex items-center justify-center text-amber-600">
          <Clock className="w-6 h-6" />
        </div>
        <div>
          <p className="text-xs font-bold text-zinc-400 uppercase tracking-wider">Ongoing Orders</p>
          <h3 className="text-2xl font-black text-zinc-900 mt-1">{analytics.ongoing}</h3>
        </div>
      </div>

      <div className="bg-white border border-zinc-200 rounded-2xl p-6 shadow-xs flex items-center gap-4">
        <div className="w-12 h-12 rounded-xl bg-emerald-50 flex items-center justify-center text-emerald-600">
          <CheckCircle2 className="w-6 h-6" />
        </div>
        <div>
          <p className="text-xs font-bold text-zinc-400 uppercase tracking-wider">Completed Orders</p>
          <h3 className="text-2xl font-black text-zinc-900 mt-1">{analytics.delivered}</h3>
        </div>
      </div>

      <div className="bg-white border border-zinc-200 rounded-2xl p-6 shadow-xs flex items-center gap-4">
        <div className="w-12 h-12 rounded-xl bg-rose-50 flex items-center justify-center text-rose-600">
          <ShoppingBag className="w-6 h-6" />
        </div>
        <div>
          <p className="text-xs font-bold text-zinc-400 uppercase tracking-wider">Canceled Orders</p>
          <h3 className="text-2xl font-black text-zinc-900 mt-1">{analytics.cancelled || 0}</h3>
        </div>
      </div>

      <div className="bg-white border border-zinc-200 rounded-2xl p-6 shadow-xs flex items-center gap-4">
        <div className="w-12 h-12 rounded-xl bg-zinc-100 flex items-center justify-center text-zinc-650">
          <ShoppingBag className="w-6 h-6" />
        </div>
        <div>
          <p className="text-xs font-bold text-zinc-400 uppercase tracking-wider">Total Bookings</p>
          <h3 className="text-2xl font-black text-zinc-900 mt-1">{analytics.total}</h3>
        </div>
      </div>
    </div>
  );
}