'use client'import React from 'react';import { Home, Calendar } from 'lucide-react';import { motion } from 'motion/react';import { clsx, type ClassValue } from "clsx"import { twMerge } from "tailwind-merge"import { ResponsiveContainer, PieChart, Pie, Cell, Tooltip } from 'recharts';function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs))}interface LoanData {  name: string;  value: number;  color: string;  [key: string]: any;}interface LoanCardProps {  isInteractive?: boolean;  className?: string;  title?: string;  amount?: string;  amountLabel?: string;  equityPercentage?: string;  nextPaymentDate?: string;  nextPaymentAmount?: string;  data?: LoanData[];}const DEFAULT_TITLE = "Mortgage Loan";const DEFAULT_AMOUNT = "$184k";const DEFAULT_AMOUNT_LABEL = "Remaining";const DEFAULT_EQUITY_PERCENTAGE = "32%";const DEFAULT_NEXT_PAYMENT_DATE = "Nov 01";const DEFAULT_NEXT_PAYMENT_AMOUNT = "$1,240";const DEFAULT_DATA: LoanData[] = [  { name: 'Paid', value: 86800, color: '#10b981' }, // Emerald  { name: 'Remaining', value: 184200, color: '#e4e4e7' }, // Zinc-200];export const LoanCard: React.FC<LoanCardProps> = ({  isInteractive = true,  className = "",  title = DEFAULT_TITLE,  amount = DEFAULT_AMOUNT,  amountLabel = DEFAULT_AMOUNT_LABEL,  equityPercentage = DEFAULT_EQUITY_PERCENTAGE,  nextPaymentDate = DEFAULT_NEXT_PAYMENT_DATE,  nextPaymentAmount = DEFAULT_NEXT_PAYMENT_AMOUNT,  data = DEFAULT_DATA,}) => {  const index = 27;  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">{amount}</span>            <span className="text-xs text-muted-foreground">{amountLabel}</span>          </div>        </div>        <div className="rounded-lg bg-emerald-500/10 p-2 text-emerald-500">          <Home className="h-5 w-5" />        </div>      </div>      <div className="relative z-10 flex-1 min-h-[140px] flex items-center justify-center">        <div className="h-[140px] w-full relative">          <ResponsiveContainer width="100%" height="100%">            <PieChart>              <Pie                data={data}                cx="50%"                cy="50%"                innerRadius={50}                outerRadius={65}                paddingAngle={5}                dataKey="value"                stroke="none"              >                {data.map((entry, index) => (                  <Cell key={`cell-${index}`} fill={entry.color} />                ))}              </Pie>              <Tooltip                cursor={{ fill: 'transparent' }}                contentStyle={{ backgroundColor: 'var(--tooltip-bg)', borderRadius: '8px', border: 'none', color: 'var(--tooltip-text)' }}                formatter={(value: number) => [`$${value.toLocaleString()}`, 'Amount']}              />            </PieChart>          </ResponsiveContainer>          <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none pb-1">            <span className="text-xs text-muted-foreground">Equity</span>            <span className="font-bold text-emerald-500">{equityPercentage}</span>          </div>        </div>      </div>      <div className="z-10 mt-2 flex items-center justify-between text-xs pt-2 border-t border-border">        <div className="flex items-center gap-1.5">          <Calendar className="w-3.5 h-3.5 text-muted-foreground" />          <span className="text-foreground font-medium">Next: {nextPaymentDate}</span>        </div>        <span className="font-bold text-foreground">{nextPaymentAmount}</span>      </div>    </motion.div>  );};