'use client';import React from "react";import { Activity, TrendingUp } 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 Metric {   metric: string;   value: number;   target: number;   unit: string;   [key: string]: any;}interface WarehouseProductivityCardProps {   className?: string;   title?: string;   description?: string;   overallEfficiency?: string;   metrics?: Metric[];}const DEFAULT_TITLE = "Warehouse Productivity";const DEFAULT_DESCRIPTION = "Efficiency Metrics";const DEFAULT_OVERALL_EFFICIENCY = "112%";const DEFAULT_METRICS: Metric[] = [   { metric: "Orders/Hour", value: 45, target: 40, unit: "orders" },   { metric: "Pick Accuracy", value: 99.2, target: 98, unit: "%" },   { metric: "Pack Time", value: 3.2, target: 4, unit: "min" },   { metric: "Space Utilization", value: 87, target: 85, unit: "%" },];export const WarehouseProductivityCard: React.FC<   WarehouseProductivityCardProps> = ({   className = "",   title = DEFAULT_TITLE,   description = DEFAULT_DESCRIPTION,   overallEfficiency = DEFAULT_OVERALL_EFFICIENCY,   metrics = DEFAULT_METRICS,}) => {      const isInteractive = true;      const index = 39;      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">                  <Activity className="h-5 w-5 text-indigo-500" />               </div>            </div>            <div className="relative z-10 flex-1">               <div className="flex items-baseline gap-2 mb-2">                  <div className="text-3xl font-bold text-emerald-500">                     {overallEfficiency}                  </div>                  <TrendingUp className="h-5 w-5 text-emerald-500" />               </div>               <p className="text-sm text-muted-foreground mb-4">                  Overall efficiency vs target               </p>               <div className="grid grid-cols-2 gap-3">                  {metrics.map((metric, idx) => {                     const isAboveTarget =                        metric.metric === "Pack Time"                           ? metric.value < metric.target                           : metric.value > metric.target;                     return (                        <motion.div                           key={idx}                           initial={{ opacity: 0, scale: 0.9 }}                           animate={{ opacity: 1, scale: 1 }}                           transition={{ duration: 0.3, delay: idx * 0.1 }}                           className="bg-muted rounded-lg p-3"                        >                           <div className="text-xs text-muted-foreground mb-1">                              {metric.metric}                           </div>                           <div className="text-xl font-bold text-foreground mb-1">                              {metric.value}                              {metric.unit}                           </div>                           <div                              className={`text-xs font-medium ${isAboveTarget ? "text-emerald-500" : "text-amber-500"}`}                           >                              Target: {metric.target}                              {metric.unit}                           </div>                        </motion.div>                     );                  })}               </div>            </div>         </motion.div>      );   };