'use client'import React from 'react';import { Siren, Clock, Activity, Users } from 'lucide-react';import { motion } from 'motion/react';import { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";import { LineChart, Line, ResponsiveContainer, Tooltip } from 'recharts';function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs));}interface WaitTimeData {  time: string;  mins: number;  [key: string]: any;}interface EmergencyDeptCardProps {  className?: string;  title?: string;  subtitle?: string;  currentWaitTime?: string;  waitStatusLabel?: string;  waitingCount?: number;  triageCount?: number;  data?: WaitTimeData[];}const DEFAULT_DATA: WaitTimeData[] = [  { time: '10am', mins: 15 },  { time: '11am', mins: 22 },  { time: '12pm', mins: 35 },  { time: '1pm', mins: 28 },  { time: '2pm', mins: 24 },  { time: '3pm', mins: 18 },];const DEFAULT_TITLE = "ER Status";const DEFAULT_SUBTITLE = "Live Wait Times";const DEFAULT_CURRENT_WAIT_TIME = "24";const DEFAULT_WAIT_STATUS_LABEL = "High Volume";const DEFAULT_WAITING_COUNT = 14;const DEFAULT_TRIAGE_COUNT = 3;export const EmergencyDeptCard: React.FC<EmergencyDeptCardProps> = ({  className = "",  title = DEFAULT_TITLE,  subtitle = DEFAULT_SUBTITLE,  currentWaitTime = DEFAULT_CURRENT_WAIT_TIME,  waitStatusLabel = DEFAULT_WAIT_STATUS_LABEL,  waitingCount = DEFAULT_WAITING_COUNT,  triageCount = DEFAULT_TRIAGE_COUNT,  data = DEFAULT_DATA,}) => {  const isInteractive = true;  const index = 14;  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-rose-300 dark:hover:border-rose-700 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-rose-500/80"></span>                <span className="relative inline-flex rounded-full h-2 w-2 bg-rose-500 animate-ping absolute opacity-20"></span>              </span>              <p className="text-sm text-muted-foreground font-medium">                {subtitle}              </p>            </div>          </div>          <div className="rounded-xl bg-rose-500/10 p-2.5 text-rose-500 flex items-center justify-center ring-1 ring-rose-100 dark:ring-rose-800">            <Siren className="h-5 w-5" />          </div>        </div>        <div className="flex-1 flex flex-col">          <div className="flex items-end gap-3 mb-4">            <div>              <span className="text-4xl font-bold text-foreground tracking-tighter">{currentWaitTime}</span>              <span className="text-xl font-medium text-muted-foreground ml-1">min</span>            </div>            <div className="mb-1.5 px-2 py-0.5 rounded-lg bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 text-[10px] font-bold uppercase tracking-wide border border-orange-200 dark:border-orange-800">              {waitStatusLabel}            </div>          </div>          <div className="flex-1 min-h-[60px] relative">            <ResponsiveContainer width="100%" height="100%">              <LineChart data={data}>                <Line type="monotone" dataKey="mins" stroke="#f43f5e" strokeWidth={2} dot={{ r: 2, fill: '#f43f5e' }} activeDot={{ r: 4 }} />                <Tooltip                  contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)', padding: '4px 8px', fontSize: '10px' }}                  itemStyle={{ color: '#f43f5e', fontWeight: 'bold' }}                  labelStyle={{ display: 'none' }}                />              </LineChart>            </ResponsiveContainer>            <p className="absolute bottom-0 right-0 text-[9px] text-muted-foreground">Last 6 Hours</p>          </div>          <div className="mt-3 grid grid-cols-2 gap-2">            <div className="bg-muted p-2 rounded-lg flex items-center gap-2">              <Users className="h-4 w-4 text-muted-foreground" />              <div>                <p className="text-[10px] uppercase text-muted-foreground font-bold">Waiting</p>                <p className="text-sm font-bold text-foreground">{waitingCount}</p>              </div>            </div>            <div className="bg-muted p-2 rounded-lg flex items-center gap-2">              <Activity className="h-4 w-4 text-muted-foreground" />              <div>                <p className="text-[10px] uppercase text-muted-foreground font-bold">Triage</p>                <p className="text-sm font-bold text-foreground">{triageCount}</p>              </div>            </div>          </div>        </div>      </div>    </motion.div>  );};