'use client'import React from 'react';import { DollarSign, TrendingDown, ArrowUpRight } from 'lucide-react';import { motion } from 'motion/react';import { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";import { AreaChart, Area, ResponsiveContainer, Tooltip } from 'recharts';function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs));}interface CostData {  value: number;  [key: string]: any;}interface CostPerCaseCardProps {  className?: string;  title?: string;  subtitle?: string;  currentCost?: string;  trend?: string;  comparisonLabel?: string;  comparisonValue?: string;  data?: CostData[];}const DEFAULT_DATA: CostData[] = [  { value: 12500 }, { value: 12800 }, { value: 12300 }, { value: 12100 }, { value: 12450 }, { value: 12000 }, { value: 12450 }];const DEFAULT_TITLE = "Finance";const DEFAULT_SUBTITLE = "Cost Per Case";const DEFAULT_CURRENT_COST = "$12,450";const DEFAULT_TREND = "-2%";const DEFAULT_COMPARISON_LABEL = "Med/Surg Avg";const DEFAULT_COMPARISON_VALUE = "$11,200";export const CostPerCaseCard: React.FC<CostPerCaseCardProps> = ({  className = "",  title = DEFAULT_TITLE,  subtitle = DEFAULT_SUBTITLE,  currentCost = DEFAULT_CURRENT_COST,  trend = DEFAULT_TREND,  comparisonLabel = DEFAULT_COMPARISON_LABEL,  comparisonValue = DEFAULT_COMPARISON_VALUE,  data = DEFAULT_DATA,}) => {  const isInteractive = true;  const index = 38;  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-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-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">            <DollarSign className="h-5 w-5" />          </div>        </div>        <div className="flex-1 flex flex-col">          <div className="flex items-baseline gap-1 mb-1">            <span className="text-3xl font-bold text-foreground tracking-tight">{currentCost}</span>            <span className="text-xs text-zinc-400 font-medium">/ avg</span>          </div>          <div className="flex items-center gap-2 mb-4">            <span className="inline-flex items-center gap-1 text-[10px] font-bold text-emerald-600 bg-emerald-500/10 px-1.5 py-0.5 rounded">              <TrendingDown className="h-3 w-3" /> {trend}            </span>            <span className="text-[10px] text-muted-foreground">vs Budget</span>          </div>          <div className="flex-1 min-h-[60px] relative -mx-2">            <ResponsiveContainer width="100%" height="100%">              <AreaChart data={data}>                <defs>                  <linearGradient id="colorCost" x1="0" y1="0" x2="0" y2="1">                    <stop offset="5%" stopColor="#10b981" stopOpacity={0.2} />                    <stop offset="95%" stopColor="#10b981" stopOpacity={0} />                  </linearGradient>                </defs>                <Area type="monotone" dataKey="value" stroke="#10b981" fillOpacity={1} fill="url(#colorCost)" strokeWidth={2} />                <Tooltip                  contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)', padding: '4px 8px', fontSize: '10px' }}                  itemStyle={{ color: '#10b981', fontWeight: 'bold' }}                  formatter={(value) => [`$${value}`, 'Cost']}                  labelStyle={{ display: 'none' }}                />              </AreaChart>            </ResponsiveContainer>          </div>          <div className="flex justify-between items-center text-[10px] text-muted-foreground pt-2 border-t border-border">            <span>{comparisonLabel}</span>            <span className="font-semibold text-foreground">{comparisonValue}</span>          </div>        </div>      </div>    </motion.div>  );};