"use client";

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { formatMaybeDate } from "@/lib/customer-service/helpers";
import { format } from "date-fns";

type RecentSalesCardProps = {
  recentSales: unknown[];
  showContextSkeleton: boolean;
};

export function RecentSalesCard({ recentSales, showContextSkeleton }: RecentSalesCardProps) {
  return (
    <Card className="rounded-xl border-slate-200/80 bg-white shadow-sm">
      <CardHeader>
        <CardTitle className="text-base font-semibold">Ventas Recientes</CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">
        {showContextSkeleton ? (
          <div className="space-y-2">
            <Skeleton className="h-10 w-full rounded-lg" />
            <Skeleton className="h-10 w-full rounded-lg" />
          </div>
        ) : recentSales.length === 0 ? (
          <p className="text-sm text-slate-500">Sin ventas recientes.</p>
        ) : (
          recentSales.slice(0, 5).map((sale: any) => (
            <div
              key={sale.id}
              className="flex items-center justify-between rounded-lg border border-slate-100 bg-slate-50/50 px-3 py-2 text-sm"
            >
              <div>
                <p className="font-medium text-slate-800">Orden #{sale.id}</p>
                <p className="text-xs text-slate-500">
                  {sale.created_at ? format(new Date(sale.created_at), "dd/MM/yyyy") : "—"}
                </p>
              </div>
              <span className="text-blue-700 font-bold">
                ${Number(sale.total).toLocaleString()}
              </span>
            </div>
          ))
        )}
      </CardContent>
    </Card>
  );
}