'use client';import React from "react";import { Warehouse, 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 WarehouseData {   name: string;   used: number;   total: number;   location: string;   [key: string]: any;}interface WarehouseCapacityCardProps {   className?: string;   title?: string;   description?: string;   warehouses?: WarehouseData[];}const DEFAULT_TITLE = "Warehouse Capacity";const DEFAULT_DESCRIPTION = "Storage Utilization";const DEFAULT_WAREHOUSES: WarehouseData[] = [   { name: "Main Warehouse", used: 8500, total: 10000, location: "NYC" },   { name: "West Coast", used: 6200, total: 8000, location: "LA" },   { name: "Midwest Hub", used: 4800, total: 6000, location: "CHI" },];export const WarehouseCapacityCard: React.FC<WarehouseCapacityCardProps> = ({   className = "",   title = DEFAULT_TITLE,   description = DEFAULT_DESCRIPTION,   warehouses = DEFAULT_WAREHOUSES,}) => {   const isInteractive = true;   const index = 16;   const totalUsed = warehouses.reduce((sum, w) => sum + w.used, 0);   const totalCapacity = warehouses.reduce((sum, w) => sum + w.total, 0);   const utilization =      totalCapacity > 0 ? Math.round((totalUsed / totalCapacity) * 100) : 0;   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">               <Warehouse 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-1">               <div className="text-3xl font-bold text-foreground">                  {utilization}%               </div>               <span className="text-sm text-muted-foreground">utilized</span>            </div>            <p className="text-sm text-muted-foreground mb-4">               {totalUsed.toLocaleString()} / {totalCapacity.toLocaleString()} sq ft            </p>            <div className="space-y-3">               {warehouses.map((warehouse, idx) => {                  const percent =                     warehouse.total > 0                        ? Math.round((warehouse.used / warehouse.total) * 100)                        : 0;                  return (                     <div key={idx}>                        <div className="flex justify-between items-center mb-1">                           <div>                              <span className="text-sm font-medium text-foreground">                                 {warehouse.name}                              </span>                              <span className="text-xs text-muted-foreground ml-2">                                 ({warehouse.location})                              </span>                           </div>                           <span className="text-sm font-bold text-foreground">                              {percent}%                           </span>                        </div>                        <div className="flex items-center gap-2">                           <div className="flex-1 bg-zinc-100 dark:bg-zinc-800 rounded-full h-2 overflow-hidden">                              <motion.div                                 initial={{ width: 0 }}                                 animate={{ width: `${percent}%` }}                                 transition={{ duration: 1, delay: idx * 0.1 }}                                 className={`h-full rounded-full ${percent >= 90                                       ? "bg-red-500"                                       : percent >= 75                                          ? "bg-amber-500"                                          : "bg-emerald-500"                                    }`}                              />                           </div>                        </div>                     </div>                  );               })}            </div>         </div>      </motion.div>   );};