'use client';import React from "react";import { TrendingUp, ArrowUpRight, ArrowDownRight } 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 Metric {  label: string;  value: string;  change: string;  trend: "up" | "down";  [key: string]: any;}interface ProductPerformanceCardProps {  className?: string;  title?: string;  description?: string;  metrics?: Metric[];}const DEFAULT_TITLE = "Product Performance";const DEFAULT_DESCRIPTION = "Metrics Dashboard";const DEFAULT_METRICS: Metric[] = [  { label: "Total Sales", value: "$45.2K", change: "+12.5%", trend: "up" },  { label: "Units Sold", value: "1,234", change: "+8.3%", trend: "up" },  { label: "Avg Rating", value: "4.8", change: "+0.2", trend: "up" },  { label: "Return Rate", value: "2.1%", change: "-0.5%", trend: "down" },];export const ProductPerformanceCard: React.FC<ProductPerformanceCardProps> = ({  className = "",  title = DEFAULT_TITLE,  description = DEFAULT_DESCRIPTION,  metrics = DEFAULT_METRICS,}) => {  const isInteractive = true;  const index = 13;  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">          <TrendingUp className="h-5 w-5 text-emerald-500" />        </div>      </div>      <div className="relative z-10 flex-1">        <div className="grid grid-cols-2 gap-3">          {metrics.map((metric, idx) => (            <motion.div              key={idx}              initial={{ opacity: 0, scale: 0.9 }}              animate={{ opacity: 1, scale: 1 }}              transition={{ duration: 0.3, delay: idx * 0.1 }}              className="bg-muted rounded-lg p-3"            >              <div className="text-xs text-muted-foreground mb-1">                {metric.label}              </div>              <div className="text-xl font-bold text-foreground mb-1">                {metric.value}              </div>              <div                className={`flex items-center gap-1 text-xs font-medium ${(metric.trend === "up" && !metric.label.includes("Return")) ||                    (metric.trend === "down" && metric.label.includes("Return"))                    ? "text-emerald-500"                    : "text-red-500"                  }`}              >                {(metric.trend === "up" && !metric.label.includes("Return")) ||                  (metric.trend === "down" && metric.label.includes("Return")) ? (                  <ArrowUpRight className="h-3 w-3" />                ) : (                  <ArrowDownRight className="h-3 w-3" />                )}                <span>{metric.change}</span>              </div>            </motion.div>          ))}        </div>      </div>    </motion.div>  );};