'use client';import React from "react";import { BarChart3, TrendingUp } 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 Day {  day: string;  orders: number;  [key: string]: any;}interface OrderVolumeCardProps {  className?: string;  title?: string;  description?: string;  orderChange?: number;  days?: Day[];}const DEFAULT_TITLE = "Order Volume";const DEFAULT_DESCRIPTION = "Daily Orders";const DEFAULT_ORDER_CHANGE = 12;const DEFAULT_DAYS: Day[] = [  { day: "Mon", orders: 245 },  { day: "Tue", orders: 289 },  { day: "Wed", orders: 312 },  { day: "Thu", orders: 298 },  { day: "Fri", orders: 356 },  { day: "Sat", orders: 412 },  { day: "Sun", orders: 378 },];export const OrderVolumeCard: React.FC<OrderVolumeCardProps> = ({  className = "",  title = DEFAULT_TITLE,  description = DEFAULT_DESCRIPTION,  orderChange = DEFAULT_ORDER_CHANGE,  days = DEFAULT_DAYS,}) => {  const isInteractive = true;  const index = 40;  const maxOrders = Math.max(...days.map((d) => d.orders));  const totalOrders = days.reduce((sum, d) => sum + d.orders, 0);  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">          <BarChart3 className="h-5 w-5 text-blue-500" />        </div>      </div>      <div className="relative z-10 flex-1">        <div className="flex items-baseline gap-2 mb-2">          <div className="text-3xl font-bold text-foreground">            {totalOrders}          </div>          <div className="flex items-center gap-1 text-sm">            <TrendingUp className="h-4 w-4 text-emerald-500" />            <span className="text-emerald-500">+{orderChange}%</span>          </div>        </div>        <p className="text-sm text-muted-foreground mb-4">Orders this week</p>        <div className="flex items-end justify-between h-32 gap-1">          {days.map((day, idx) => {            const height = (day.orders / maxOrders) * 100;            return (              <div                key={idx}                className="flex-1 flex flex-col items-center gap-2"              >                <motion.div                  initial={{ height: 0 }}                  animate={{ height: `${height}%` }}                  transition={{ duration: 0.8, delay: idx * 0.1 }}                  className="w-full bg-gradient-to-t from-blue-500 to-blue-400 rounded-t-lg relative"                >                  {day.orders === maxOrders && (                    <div className="absolute -top-6 left-1/2 -translate-x-1/2 text-xs font-medium text-blue-500">                      {day.orders}                    </div>                  )}                </motion.div>                <span className="text-xs text-muted-foreground">{day.day}</span>              </div>            );          })}        </div>      </div>    </motion.div>  );};