'use client'import React from 'react';import { Activity, Dumbbell, ClipboardList } 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 PhysicalTherapyCardProps {   className?: string;   title?: string;   subtitle?: string;   scheduledCount?: number;   dailyGoalPercentage?: number;   patientBreakdown?: string;}const DEFAULT_TITLE = "Rehab";const DEFAULT_SUBTITLE = "PT Sessions";const DEFAULT_SCHEDULED_COUNT = 28;const DEFAULT_DAILY_GOAL_PERCENTAGE = 45;const DEFAULT_PATIENT_BREAKDOWN = "3 In-Patient, 5 Out-Patient";export const PhysicalTherapyCard: React.FC<PhysicalTherapyCardProps> = ({   className = "",   title = DEFAULT_TITLE,   subtitle = DEFAULT_SUBTITLE,   scheduledCount = DEFAULT_SCHEDULED_COUNT,   dailyGoalPercentage = DEFAULT_DAILY_GOAL_PERCENTAGE,   patientBreakdown = DEFAULT_PATIENT_BREAKDOWN,}) => {   const isInteractive = true;   const index = 33;   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-emerald-500"></span>                     </span>                     <p className="text-sm text-muted-foreground font-medium">                        {subtitle}                     </p>                  </div>               </div>               <div className="rounded-xl bg-emerald-500/10 p-2.5 text-emerald-500 flex items-center justify-center ring-1 ring-emerald-100 dark:ring-emerald-800">                  <Dumbbell className="h-5 w-5" />               </div>            </div>            <div className="flex-1 space-y-4">               <div className="flex items-end gap-2 text-emerald-500">                  <span className="text-4xl font-bold tracking-tight">{scheduledCount}</span>                  <span className="text-sm font-medium mb-1.5 text-muted-foreground">Scheduled</span>               </div>               <div className="space-y-1.5">                  <div className="flex justify-between text-xs font-semibold text-zinc-600 dark:text-zinc-300">                     <span>Daily Goal</span>                     <span>{dailyGoalPercentage}%</span>                  </div>                  <div className="h-2 w-full bg-zinc-100 dark:bg-zinc-800 rounded-full overflow-hidden">                     <motion.div                        initial={{ width: 0 }}                        animate={{ width: `${dailyGoalPercentage}%` }}                        transition={{ duration: 1 }}                        className="h-full bg-emerald-500 rounded-full"                     />                  </div>               </div>               <div className="flex items-center gap-2 p-2 rounded-lg bg-muted">                  <ClipboardList className="h-4 w-4 text-muted-foreground" />                  <span className="text-xs font-medium text-zinc-600 dark:text-muted-foreground">{patientBreakdown}</span>               </div>            </div>         </div>      </motion.div>   );};