"use client";import React from "react";import {  ArrowUpRight,  ArrowDownLeft,  Coffee,  ShoppingBag,  Zap,  CreditCard,  type LucideIcon,} from "lucide-react";import { motion } from "motion/react";import { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";import { ResponsiveContainer, AreaChart, Area } from "recharts";function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs));}interface Transaction {  id: number;  name: string;  date: string;  amount: string;  icon: LucideIcon;  type: string;}interface SparkData {  value: number;  [key: string]: any;}interface TransactionsCardProps {  isInteractive?: boolean;  className?: string;  title?: string;  newTransactionsCount?: string;  transactions?: Transaction[];  sparkData?: SparkData[];}const DEFAULT_TITLE = "Transactions";const DEFAULT_NEW_TRANSACTIONS_COUNT = "3 New";const DEFAULT_TRANSACTIONS: Transaction[] = [  {    id: 1,    name: "Starbucks",    date: "Today, 9:41 AM",    amount: "-$5.40",    icon: Coffee,    type: "debit",  },  {    id: 2,    name: "Apple Store",    date: "Yesterday, 4:20 PM",    amount: "-$249.00",    icon: ShoppingBag,    type: "debit",  },  {    id: 3,    name: "Electric Bill",    date: "Oct 24",    amount: "-$120.50",    icon: Zap,    type: "debit",  },];const DEFAULT_SPARK_DATA: SparkData[] = [  { value: 10 },  { value: 25 },  { value: 15 },  { value: 30 },  { value: 45 },  { value: 20 },  { value: 55 },];export const TransactionsCard: React.FC<TransactionsCardProps> = ({  isInteractive = true,  className = "",  title = DEFAULT_TITLE,  newTransactionsCount = DEFAULT_NEW_TRANSACTIONS_COUNT,  transactions = DEFAULT_TRANSACTIONS,  sparkData = DEFAULT_SPARK_DATA,}) => {  const index = 51;  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">{newTransactionsCount}</span>            <div className="h-6 w-20">              <ResponsiveContainer width="100%" height="100%">                <AreaChart data={sparkData}>                  <Area                    type="monotone"                    dataKey="value"                    stroke="#10b981"                    fill="#10b981"                    fillOpacity={0.2}                    strokeWidth={2}                  />                </AreaChart>              </ResponsiveContainer>            </div>          </div>        </div>        <div className="rounded-lg bg-emerald-500/10 p-2 text-emerald-500">          <CreditCard className="h-5 w-5" />        </div>      </div>      <div className="relative z-10 flex-1">        <div className="space-y-3 mt-2">          {transactions.map((tx, i) => (            <div key={tx.id} className="flex items-center justify-between">              <div className="flex items-center gap-3">                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-muted-foreground">                  <tx.icon className="h-4 w-4" />                </div>                <div>                  <p className="text-xs font-medium text-foreground">                    {tx.name}                  </p>                  <p className="text-[10px] text-muted-foreground">{tx.date}</p>                </div>              </div>              <span className="text-xs font-semibold text-foreground">                {tx.amount}              </span>            </div>          ))}        </div>      </div>      <div className="z-10 mt-2 flex items-center justify-center text-xs pt-2 border-t border-border">        <span className="text-emerald-600 font-medium cursor-pointer hover:underline">          View All        </span>      </div>    </motion.div>  );};