'use client'import React from 'react';import { Wrench, CheckCircle2, AlertCircle, Clock } from 'lucide-react';import { motion } from 'motion/react';import { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs));}interface MaintenanceData {  name: string;  value: number;  color: string;  [key: string]: any;}interface EquipmentMaintenanceCardProps {  className?: string;  title?: string;  subtitle?: string;  uptimePercentage?: number;  activeCount?: number;  serviceCount?: number;  downCount?: number;  alertTitle?: string;  alertMessage?: string;  data?: MaintenanceData[];}const DEFAULT_DATA: MaintenanceData[] = [  { name: 'Active', value: 92, color: '#10b981' }, // emerald-500  { name: 'Maint', value: 8, color: '#f59e0b' },   // amber-500];const DEFAULT_TITLE = "Biomed";const DEFAULT_SUBTITLE = "Equipment Uptime";const DEFAULT_UPTIME_PERCENTAGE = 92;const DEFAULT_ACTIVE_COUNT = 142;const DEFAULT_SERVICE_COUNT = 8;const DEFAULT_DOWN_COUNT = 2;const DEFAULT_ALERT_TITLE = "Critical Alert";const DEFAULT_ALERT_MESSAGE = "Ventilator B4 requires immediate calib.";export const EquipmentMaintenanceCard: React.FC<EquipmentMaintenanceCardProps> = ({  className = "",  title = DEFAULT_TITLE,  subtitle = DEFAULT_SUBTITLE,  uptimePercentage = DEFAULT_UPTIME_PERCENTAGE,  activeCount = DEFAULT_ACTIVE_COUNT,  serviceCount = DEFAULT_SERVICE_COUNT,  downCount = DEFAULT_DOWN_COUNT,  alertTitle = DEFAULT_ALERT_TITLE,  alertMessage = DEFAULT_ALERT_MESSAGE,  data = DEFAULT_DATA,}) => {  const isInteractive = true;  const index = 40;  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-zinc-400 dark:hover:border-zinc-600 hover:shadow-md" : "",        className      )}    >      <div className="p-5 flex flex-col h-full relative z-10">        <div className="mb-2 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-zinc-500"></span>              </span>              <p className="text-sm text-muted-foreground font-medium">                {subtitle}              </p>            </div>          </div>          <div className="rounded-xl bg-zinc-100 dark:bg-zinc-800 p-2.5 text-zinc-600 dark:text-muted-foreground flex items-center justify-center ring-1 ring-zinc-200 dark:ring-zinc-700">            <Wrench className="h-5 w-5" />          </div>        </div>        <div className="flex-1 flex gap-4 items-center">          {/* Chart */}          <div className="relative h-20 w-20 flex-shrink-0">            <ResponsiveContainer width="100%" height="100%">              <PieChart>                <Pie                  data={data}                  innerRadius={25}                  outerRadius={35}                  paddingAngle={5}                  dataKey="value"                  stroke="none"                >                  {data.map((entry, index) => (                    <Cell key={`cell-${index}`} fill={entry.color} />                  ))}                </Pie>              </PieChart>            </ResponsiveContainer>            <div className="absolute inset-0 flex flex-col items-center justify-center">              <span className="text-xs font-bold text-foreground">{uptimePercentage}%</span>            </div>          </div>          {/* Stats List */}          <div className="flex-1 space-y-2 text-xs">            <div className="flex items-center justify-between">              <div className="flex items-center gap-1.5">                <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />                <span className="text-muted-foreground font-medium">Active</span>              </div>              <span className="font-bold text-foreground">{activeCount}</span>            </div>            <div className="flex items-center justify-between">              <div className="flex items-center gap-1.5">                <Wrench className="h-3.5 w-3.5 text-amber-500" />                <span className="text-muted-foreground font-medium">Service</span>              </div>              <span className="font-bold text-foreground">{serviceCount}</span>            </div>            <div className="flex items-center justify-between">              <div className="flex items-center gap-1.5">                <AlertCircle className="h-3.5 w-3.5 text-red-500" />                <span className="text-muted-foreground font-medium">Down</span>              </div>              <span className="font-bold text-foreground">{downCount}</span>            </div>          </div>        </div>        {alertTitle && (          <div className="mt-4 bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/30 p-2 rounded-lg flex gap-2 items-start">            <AlertCircle className="h-4 w-4 text-red-500 mt-0.5" />            <div>              <p className="text-xs font-bold text-red-700 dark:text-red-400">{alertTitle}</p>              <p className="text-[10px] text-red-600/80 dark:text-red-400/80">{alertMessage}</p>            </div>          </div>        )}      </div>    </motion.div>  );};