'use client';import React from "react";import { Truck, CheckCircle, Clock } from "lucide-react";import { motion } from "motion/react";import { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs));}interface Supplier {  name: string;  status: "on-time" | "delayed";  orders: number;  onTime: number;  [key: string]: any;}interface SupplierStatusCardProps {  className?: string;  title?: string;  description?: string;  onTimeDelivery?: string;  activeOrders?: number;  suppliers?: Supplier[];}const DEFAULT_TITLE = "Supplier Status";const DEFAULT_DESCRIPTION = "Performance Tracking";const DEFAULT_ON_TIME_DELIVERY = "93%";const DEFAULT_ACTIVE_ORDERS = 135;const DEFAULT_SUPPLIERS: Supplier[] = [  { name: "TechSupply Co", status: "on-time", orders: 45, onTime: 98 },  { name: "Global Parts", status: "delayed", orders: 23, onTime: 85 },  { name: "Quick Ship Inc", status: "on-time", orders: 67, onTime: 95 },];export const SupplierStatusCard: React.FC<SupplierStatusCardProps> = ({  className = "",  title = DEFAULT_TITLE,  description = DEFAULT_DESCRIPTION,  onTimeDelivery = DEFAULT_ON_TIME_DELIVERY,  activeOrders = DEFAULT_ACTIVE_ORDERS,  suppliers = DEFAULT_SUPPLIERS,}) => {  const isInteractive = true;  const index = 15;  const getStatusIcon = (status: string) => {    return status === "on-time" ? (      <CheckCircle className="h-4 w-4 text-emerald-500" />    ) : (      <Clock className="h-4 w-4 text-amber-500" />    );  };  return (    <motion.div      layoutId={isInteractive ? `card-${index}-${title}` : undefined}      transition={{ duration: 0.4, ease: "easeOut" }}      className={cn(        "relative overflow-hidden rounded-xl border border-border bg-card text-card-foreground p-6 shadow-sm transition-all flex flex-col group",        isInteractive          ? "cursor-pointer hover:border-zinc-300 dark:hover:border-zinc-700"          : "",        className,      )}    >      <div className="mb-4 flex items-start justify-between relative z-10">        <div>          <h3 className="font-semibold text-lg tracking-tight text-foreground">            {title}          </h3>          {description && (            <p className="text-sm text-muted-foreground mt-1">{description}</p>          )}        </div>        <div className="rounded-full bg-zinc-100 dark:bg-zinc-800 p-2 text-foreground flex items-center justify-center">          <Truck className="h-5 w-5 text-orange-500" />        </div>      </div>      <div className="relative z-10 flex-1">        <div className="flex items-center gap-4 mb-4">          <div>            <div className="text-2xl font-bold text-foreground">              {onTimeDelivery}            </div>            <div className="text-xs text-muted-foreground">              On-time delivery            </div>          </div>          <div>            <div className="text-2xl font-bold text-foreground">              {activeOrders}            </div>            <div className="text-xs text-muted-foreground">Active orders</div>          </div>        </div>        <div className="space-y-3">          {suppliers.map((supplier, idx) => (            <motion.div              key={idx}              initial={{ opacity: 0, y: 10 }}              animate={{ opacity: 1, y: 0 }}              transition={{ duration: 0.3, delay: idx * 0.1 }}              className="bg-muted rounded-lg p-3"            >              <div className="flex justify-between items-start mb-2">                <div className="flex items-center gap-2">                  {getStatusIcon(supplier.status)}                  <span className="text-sm font-medium text-foreground">                    {supplier.name}                  </span>                </div>                <span className="text-xs text-muted-foreground">                  {supplier.orders} orders                </span>              </div>              <div className="flex items-center gap-2">                <div className="flex-1 bg-zinc-200 dark:bg-zinc-700 rounded-full h-1.5 overflow-hidden">                  <motion.div                    initial={{ width: 0 }}                    animate={{ width: `${supplier.onTime}%` }}                    transition={{ duration: 1, delay: idx * 0.1 }}                    className={`h-full rounded-full ${supplier.onTime >= 95                        ? "bg-emerald-500"                        : supplier.onTime >= 85                          ? "bg-amber-500"                          : "bg-red-500"                      }`}                  />                </div>                <span className="text-xs font-medium text-foreground">                  {supplier.onTime}%                </span>              </div>            </motion.div>          ))}        </div>      </div>    </motion.div>  );};