'use client';import React from "react";import { CreditCard, TrendingUp, 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 CheckoutAbandonmentCardProps {  className?: string;  title?: string;  rate?: string;  change?: number;}const DEFAULT_TITLE = "Checkout Abandonment";const DEFAULT_RATE = "21.3%";const DEFAULT_CHANGE = 3.2;export const CheckoutAbandonmentCard: React.FC<  CheckoutAbandonmentCardProps> = ({  className = "",  title = DEFAULT_TITLE,  rate = DEFAULT_RATE,  change = DEFAULT_CHANGE,}) => {    const isInteractive = true;    const index = 29;    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-6 shadow-sm transition-all flex flex-col group",          isInteractive            ? "cursor-pointer hover:border-zinc-300 dark:hover:border-zinc-700"            : "",          className,        )}      >        <div className="mb-4 flex items-start justify-between relative z-10">          <div>            <h3 className="font-semibold text-lg tracking-tight text-foreground">              {title}            </h3>            <p className="text-sm text-muted-foreground mt-1">Last 7 days</p>          </div>          <div className="rounded-full bg-zinc-100 dark:bg-zinc-800 p-2 text-foreground flex items-center justify-center">            <CreditCard className="h-5 w-5 text-red-500" />          </div>        </div>        <div className="relative z-10 flex-1 flex flex-col justify-end">          <div className="text-3xl font-bold text-foreground mb-1">{rate}</div>          <div className="flex items-center gap-2">            <TrendingUp className="h-4 w-4 text-red-500" />            <p className="text-sm text-muted-foreground">              <span className="text-red-500">+{change}%</span> vs previous week            </p>          </div>        </div>      </motion.div>    );  };