'use client';'use client';import React from 'react';import { ArrowRightLeft, TrendingUp } from 'lucide-react';import { ComposedChart, Bar, Line, XAxis, Tooltip, ResponsiveContainer, Legend } from 'recharts';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 CashFlowData {  month: string;  income: number;  expense: number;  net: number;}interface CashFlowCardProps {  isInteractive?: boolean;  className?: string;  title?: string;  currentValue?: string;  statusLabel?: string;  savingsRate?: string;  data?: CashFlowData[];}const DEFAULT_TITLE = "Cash Flow";const DEFAULT_CURRENT_VALUE = "$6,200";const DEFAULT_STATUS_LABEL = "Inflow";const DEFAULT_SAVINGS_RATE = "43%";const DEFAULT_DATA: CashFlowData[] = [  { month: 'Jan', income: 5000, expense: 3200, net: 1800 },  { month: 'Feb', income: 5500, expense: 3800, net: 1700 },  { month: 'Mar', income: 4800, expense: 4100, net: 700 },  { month: 'Apr', income: 6200, expense: 3500, net: 2700 },];export const CashFlowCard: React.FC<CashFlowCardProps> = ({  isInteractive = true,  className = "",  title = DEFAULT_TITLE,  currentValue = DEFAULT_CURRENT_VALUE,  statusLabel = DEFAULT_STATUS_LABEL,  savingsRate = DEFAULT_SAVINGS_RATE,  data = DEFAULT_DATA,}) => {  const index = 32;  return (    <motion.div      layoutId={isInteractive ? `card-${index}-${title}` : undefined}      transition={{ duration: 0.4, ease: "easeOut" }}      className={cn(        "relative overflow-hidden rounded-xl border border-border bg-card text-card-foreground p-5 shadow-sm transition-all flex flex-col h-full group",        isInteractive ? "cursor-pointer hover:border-primary/50 hover:shadow-md" : "",        className      )}    >      <div className="mb-2 flex items-start justify-between relative z-10">        <div>          <h3 className="font-semibold text-lg text-foreground">            {title}          </h3>          <div className="flex items-center gap-2 mt-1">            <span className="text-2xl font-bold text-foreground">{currentValue}</span>            <span className="text-xs font-medium text-emerald-600 bg-emerald-500/10 px-1.5 py-0.5 rounded-full flex items-center gap-0.5">              <TrendingUp className="w-3 h-3" /> {statusLabel}            </span>          </div>        </div>        <div className="rounded-lg bg-emerald-500/10 p-2 text-emerald-500">          <ArrowRightLeft className="h-5 w-5" />        </div>      </div>      <div className="relative z-10 flex-1 min-h-[140px]">        <div className="absolute inset-0">          <ResponsiveContainer width="100%" height="100%">            <ComposedChart data={data} barGap={0}>              <Tooltip                cursor={{ fill: 'transparent' }}                contentStyle={{ backgroundColor: 'var(--tooltip-bg)', borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}                trigger="hover"                wrapperStyle={{ outline: 'none' }}              />              <XAxis                dataKey="month"                axisLine={false}                tickLine={false}                tick={{ fill: '#71717a', fontSize: 10 }}                dy={10}              />              <Legend verticalAlign="top" iconType="circle" height={36} wrapperStyle={{ fontSize: '10px' }} />              <Bar                name="In"                dataKey="income"                fill="#10b981"                radius={[2, 2, 0, 0]}                barSize={12}              />              <Bar                name="Out"                dataKey="expense"                fill="#f43f5e"                radius={[2, 2, 0, 0]}                barSize={12}              />              <Line type="monotone" dataKey="net" stroke="#3b82f6" strokeWidth={2} dot={false} name="Net" />            </ComposedChart>          </ResponsiveContainer>        </div>      </div>      <div className="z-10 mt-2 flex items-center justify-between text-xs pt-2 border-t border-border">        <span className="text-muted-foreground">Savings Rate</span>        <span className="font-bold text-foreground">{savingsRate}</span>      </div>    </motion.div>  );};