'use client'import React from 'react';import { Repeat, AlertOctagon } from 'lucide-react';import { motion } from 'motion/react';import { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";import { BarChart, Bar, XAxis, Tooltip, ResponsiveContainer, ReferenceLine } from 'recharts';function cn(...inputs: ClassValue[]) {   return twMerge(clsx(inputs));}interface ReadmissionData {   month: string;   rate: number;   [key: string]: any;}interface ReadmissionRateCardProps {   className?: string;   title?: string;   subtitle?: string;   currentRate?: string;   trendValue?: string;   trendLabel?: string;   targetRate?: number;   data?: ReadmissionData[];}const DEFAULT_DATA: ReadmissionData[] = [   { month: 'Jan', rate: 9.2 },   { month: 'Feb', rate: 8.8 },   { month: 'Mar', rate: 9.5 },   { month: 'Apr', rate: 8.4 },   { month: 'May', rate: 8.2 },   { month: 'Jun', rate: 8.4 },];const DEFAULT_TITLE = "Readmissions";const DEFAULT_SUBTITLE = "30-Day Rate";const DEFAULT_CURRENT_RATE = "8.4%";const DEFAULT_TREND_VALUE = "-1.2%";const DEFAULT_TREND_LABEL = "6 Month Trend";const DEFAULT_TARGET_RATE = 9;export const ReadmissionRateCard: React.FC<ReadmissionRateCardProps> = ({   className = "",   title = DEFAULT_TITLE,   subtitle = DEFAULT_SUBTITLE,   currentRate = DEFAULT_CURRENT_RATE,   trendValue = DEFAULT_TREND_VALUE,   trendLabel = DEFAULT_TREND_LABEL,   targetRate = DEFAULT_TARGET_RATE,   data = DEFAULT_DATA,}) => {   const isInteractive = true;   const index = 22;   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-violet-300 dark:hover:border-violet-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-violet-500"></span>                     </span>                     <p className="text-sm text-muted-foreground font-medium">                        {subtitle}                     </p>                  </div>               </div>               <div className="rounded-xl bg-violet-500/10 p-2.5 text-violet-500 flex items-center justify-center ring-1 ring-violet-100 dark:ring-violet-800">                  <Repeat className="h-5 w-5" />               </div>            </div>            <div className="flex-1">               <div className="flex items-end gap-2 mb-4">                  <span className="text-4xl font-bold text-foreground tracking-tight">{currentRate}</span>                  <span className="text-sm font-semibold text-emerald-500 mb-1.5 bg-emerald-500/10 px-1.5 py-0.5 rounded">{trendValue}</span>               </div>               <div className="h-24 w-full">                  <ResponsiveContainer width="100%" height="100%">                     <BarChart data={data}>                        {targetRate && <ReferenceLine y={targetRate} stroke="#ef4444" strokeDasharray="3 3" />}                        <Bar dataKey="rate" fill="#8b5cf6" radius={[4, 4, 0, 0]} opacity={0.8} />                        <Tooltip                           cursor={{ fill: 'transparent' }}                           contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}                        />                     </BarChart>                  </ResponsiveContainer>               </div>               <div className="mt-2 text-[10px] text-muted-foreground text-center uppercase font-medium">{trendLabel}</div>            </div>         </div>      </motion.div>   );};