'use client';import React from "react";import { DollarSign, TrendingUp, TrendingDown } 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 Trend {  direction: "up" | "down";  percentage: number;}interface AverageOrderValueCardProps {  className?: string;  title?: string;  description?: string;  value?: string;  trend?: Trend;}const DEFAULT_TITLE = "Average Order Value";const DEFAULT_DESCRIPTION = "Last 30 days";const DEFAULT_VALUE = "$45.67";const DEFAULT_TREND: Trend = { direction: "up", percentage: 5.2 };export const AverageOrderValueCard: React.FC<AverageOrderValueCardProps> = ({  className = "",  title = DEFAULT_TITLE,  description = DEFAULT_DESCRIPTION,  value = DEFAULT_VALUE,  trend = DEFAULT_TREND,}) => {  const isInteractive = true;  const index = 24;  const TrendIcon = trend.direction === "up" ? TrendingUp : TrendingDown;  const trendColor =    trend.direction === "up" ? "text-emerald-500" : "text-red-500";  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>          {description && (            <p className="text-sm text-muted-foreground mt-1">{description}</p>          )}        </div>        <div className="rounded-full bg-zinc-100 dark:bg-zinc-800 p-2 text-foreground flex items-center justify-center">          <DollarSign className="h-5 w-5 text-blue-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">{value}</div>        <div className="flex items-center gap-2">          <TrendIcon className={`h-4 w-4 ${trendColor}`} />          <p className="text-sm text-muted-foreground">            <span className={trendColor}>{trend.percentage}%</span> vs last            month          </p>        </div>      </div>    </motion.div>  );};