'use client'import React from 'react';import { Droplet, AlertTriangle, Syringe } 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 InventoryItem {   type: string;   units: number;   max: number;   status: string;}interface BloodBankInventoryCardProps {   className?: string;   title?: string;   subtitle?: string;   items?: InventoryItem[];}const DEFAULT_ITEMS: InventoryItem[] = [   { type: "A+", units: 12, max: 20, status: 'good' },   { type: "O+", units: 8, max: 20, status: 'warning' },   { type: "O-", units: 2, max: 15, status: 'critical' },];const DEFAULT_TITLE = "Blood Bank";const DEFAULT_SUBTITLE = "Inventory Levels";export const BloodBankInventoryCard: React.FC<BloodBankInventoryCardProps> = ({   className = "",   title = DEFAULT_TITLE,   subtitle = DEFAULT_SUBTITLE,   items = DEFAULT_ITEMS,}) => {   const isInteractive = true;   const index = 44;   return (      <motion.div         layoutId={isInteractive ? `card-${index}-${title}` : undefined}         transition={{ duration: 0.4, ease: "easeOut" }}         className={cn(            "relative overflow-hidden rounded-2xl border border-border bg-card text-card-foreground shadow-sm transition-all flex flex-col h-full",            isInteractive ? "hover:border-red-300 dark:hover:border-red-700 hover:shadow-md" : "",            className         )}      >         <div className="p-5 flex flex-col h-full relative z-10">            <div className="mb-4 flex items-start justify-between">               <div>                  <h3 className="font-bold text-lg text-foreground">                     {title}                  </h3>                  <div className="flex items-center gap-1.5 mt-1">                     <span className="relative flex h-2 w-2">                        <span className="relative inline-flex rounded-full h-2 w-2 bg-red-500/80"></span>                        <span className="relative inline-flex rounded-full h-2 w-2 bg-red-500 animate-ping absolute opacity-5"></span>                     </span>                     <p className="text-sm text-muted-foreground font-medium">                        {subtitle}                     </p>                  </div>               </div>               <div className="rounded-xl bg-red-50 dark:bg-red-900/20 p-2.5 text-red-600 dark:text-red-400 flex items-center justify-center ring-1 ring-red-100 dark:ring-red-800">                  <Droplet className="h-5 w-5 fill-current" />               </div>            </div>            <div className="flex-1 space-y-3">               {items.map((item, i) => (                  <div key={i} className="group/item">                     <div className="flex justify-between items-center mb-1.5">                        <span className="text-sm font-bold text-foreground w-8">{item.type}</span>                        <div className="flex-1 mx-3">                           <div className="h-2 w-full bg-zinc-100 dark:bg-zinc-800 rounded-full overflow-hidden">                              <motion.div                                 initial={{ width: 0 }}                                 animate={{ width: `${(item.units / item.max) * 100}%` }}                                 transition={{ delay: i * 0.1, duration: 0.5 }}                                 className={cn(                                    "h-full rounded-full relative",                                    item.status === 'good' ? "bg-red-500" :                                       item.status === 'warning' ? "bg-amber-500" : "bg-red-600"                                 )}                              >                                 {/* Shimmer effect for critical */}                                 {item.status === 'critical' && (                                    <div className="absolute inset-0 bg-white/30 animate-pulse" />                                 )}                              </motion.div>                           </div>                        </div>                        <span className={cn(                           "text-xs font-bold w-12 text-right",                           item.status === 'critical' ? "text-red-600 dark:text-red-400 animate-pulse" : "text-zinc-600 dark:text-muted-foreground"                        )}>                           {item.units} <span className="text-[9px] font-normal text-muted-foreground">units</span>                        </span>                     </div>                  </div>               ))}               {items.some(i => i.status === 'critical') && (                  <div className="mt-2 p-2 bg-red-50 dark:bg-red-900/10 rounded-lg border border-red-100 dark:border-red-900/30 flex items-start gap-2">                     <AlertTriangle className="h-4 w-4 text-red-500 flex-shrink-0 mt-0.5" />                     <div>                        <p className="text-xs font-bold text-red-700 dark:text-red-400">Low Inventory Alert</p>                        <p className="text-[10px] text-red-600/80 dark:text-red-400/80">Critical levels detected. Restock ordered.</p>                     </div>                  </div>               )}            </div>         </div>      </motion.div>   );};