'use client';import React from 'react';import { FileOutput, AlertCircle } from 'lucide-react';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 Item {  name: string;  amount: string;  due: string;  status: string;}interface AccountsPayableCardProps {  isInteractive?: boolean;  className?: string;  title?: string;  totalAmount?: string;  statusText?: string;  items?: Item[];}const DEFAULT_TITLE = "Accounts Payable";const DEFAULT_TOTAL_AMOUNT = "$27.2k";const DEFAULT_STATUS_TEXT = "Due Soon";const DEFAULT_ITEMS: Item[] = [  { name: 'Google Cloud', amount: '$12,200', due: '2 days', status: 'urgent' },  { name: 'Office Lease', amount: '$4,500', due: '5 days', status: 'warning' },  { name: 'Legal Retainer', amount: '$2,000', due: '7 days', status: 'normal' },  { name: 'AWS', amount: '$8,500', due: '15 days', status: 'normal' },];export const AccountsPayableCard: React.FC<AccountsPayableCardProps> = ({  isInteractive = true,  className = "",  title = DEFAULT_TITLE,  totalAmount = DEFAULT_TOTAL_AMOUNT,  statusText = DEFAULT_STATUS_TEXT,  items = DEFAULT_ITEMS,}) => {  const index = 31;  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">{totalAmount}</span>            <span className="text-xs text-amber-500 bg-amber-500/10 px-1.5 py-0.5 rounded-full flex items-center gap-0.5">              <AlertCircle className="w-3 h-3" /> {statusText}            </span>          </div>        </div>        <div className="rounded-lg bg-emerald-500/10 p-2 text-emerald-500">          <FileOutput className="h-5 w-5" />        </div>      </div>      <div className="absolute -bottom-4 -right-4 z-0 opacity-[0.03] pointer-events-none">        <FileOutput className="w-24 h-24 text-foreground" />      </div>    </motion.div>  );};