'use client'import React from 'react';import { Pill, Check, Clock } 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 Medication {   name: string;   dose: string;   time: string;   status: 'given' | 'due' | 'upcoming';}interface MedicationScheduleCardProps {   className?: string;   title?: string;   subtitle?: string;   medications?: Medication[];}const DEFAULT_MEDICATIONS: Medication[] = [   { name: 'Amoxicillin', dose: '500mg', time: '08:00', status: 'given' },   { name: 'Ibuprofen', dose: '400mg', time: '14:00', status: 'due' },   { name: 'Vitamin D', dose: '1000IU', time: '20:00', status: 'upcoming' }];const DEFAULT_TITLE = "Meds";const DEFAULT_SUBTITLE = "Room 101 - J. Doe";export const MedicationScheduleCard: React.FC<MedicationScheduleCardProps> = ({   className = "",   title = DEFAULT_TITLE,   subtitle = DEFAULT_SUBTITLE,   medications = DEFAULT_MEDICATIONS,}) => {   const isInteractive = true;   const index = 7;   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-primary/50 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-teal-500"></span>                     </span>                     <p className="text-sm text-muted-foreground font-medium">                        {subtitle}                     </p>                  </div>               </div>               <div className="rounded-xl bg-teal-500/10 p-2.5 text-teal-500 flex items-center justify-center ring-1 ring-teal-100 dark:ring-teal-800">                  <Pill className="h-5 w-5" />               </div>            </div>            <div className="flex-1 relative">               <div className="absolute left-[19px] top-2 bottom-2 w-0.5 bg-zinc-100 dark:bg-zinc-800" />               <div className="space-y-4">                  {medications.map((med, i) => (                     <div key={i} className="relative flex items-center gap-3 pl-2 group">                        <div className={cn(                           "relative z-10 h-6 w-6 rounded-full border-[3px] flex items-center justify-center transition-colors",                           med.status === 'given' ? "bg-emerald-500 border-white dark:border-zinc-900" :                              med.status === 'due' ? "bg-card text-card-foreground border-teal-500" :                                 "bg-zinc-200 dark:bg-zinc-800 border-white dark:border-zinc-900"                        )}>                           {med.status === 'given' && <Check className="h-3 w-3 text-white" />}                           {med.status === 'due' && <div className="h-2 w-2 rounded-full bg-teal-500 animate-pulse" />}                        </div>                        <div className="flex-1">                           <div className="flex justify-between items-center mb-0.5">                              <span className={cn(                                 "text-sm font-bold",                                 med.status === 'due' ? "text-teal-700 dark:text-teal-400" : "text-foreground"                              )}>{med.name}</span>                              <span className="text-xs text-zinc-400 font-medium">{med.time}</span>                           </div>                           <p className="text-xs text-muted-foreground">{med.dose}</p>                        </div>                        {med.status === 'due' ? (                           <button className="absolute right-0 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity bg-teal-600 text-white text-[10px] px-2 py-1 rounded shadow-sm font-medium">                              Give                           </button>                        ) : null}                     </div>                  ))}               </div>            </div>         </div>      </motion.div>   );};