'use client';import React from "react";import { BarChart2, 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 Sku {  sku: string;  name: string;  velocity: "fast" | "medium" | "slow";  sales: number;  margin: number;  [key: string]: any;}interface SkuAnalyticsCardProps {  className?: string;  title?: string;  description?: string;  totalSKUs?: string;  avgMargin?: string;  skus?: Sku[];}const DEFAULT_TITLE = "SKU Analytics";const DEFAULT_DESCRIPTION = "SKU Insights";const DEFAULT_TOTAL_SKUS = "1,247";const DEFAULT_AVG_MARGIN = "42%";const DEFAULT_SKUS: Sku[] = [  {    sku: "WH-001",    name: "Wireless Headphones",    velocity: "fast",    sales: 342,    margin: 45,  },  {    sku: "SW-205",    name: "Smart Watch",    velocity: "medium",    sales: 198,    margin: 38,  },  {    sku: "PC-103",    name: "Phone Case",    velocity: "slow",    sales: 89,    margin: 52,  },];export const SkuAnalyticsCard: React.FC<SkuAnalyticsCardProps> = ({  className = "",  title = DEFAULT_TITLE,  description = DEFAULT_DESCRIPTION,  totalSKUs = DEFAULT_TOTAL_SKUS,  avgMargin = DEFAULT_AVG_MARGIN,  skus = DEFAULT_SKUS,}) => {  const isInteractive = true;  const index = 17;  const getVelocityColor = (velocity: string) => {    if (velocity === "fast") return "text-emerald-500";    if (velocity === "medium") return "text-amber-500";    return "text-muted-foreground";  };  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">          <BarChart2 className="h-5 w-5 text-blue-500" />        </div>      </div>      <div className="relative z-10 flex-1">        <div className="grid grid-cols-2 gap-3 mb-4">          <div>            <div className="text-xs text-muted-foreground mb-1">Total SKUs</div>            <div className="text-2xl font-bold text-foreground">              {totalSKUs}            </div>          </div>          <div>            <div className="text-xs text-muted-foreground mb-1">Avg Margin</div>            <div className="text-2xl font-bold text-emerald-500">              {avgMargin}            </div>          </div>        </div>        <div className="space-y-3">          {skus.map((sku, idx) => (            <motion.div              key={idx}              initial={{ opacity: 0, x: -10 }}              animate={{ opacity: 1, x: 0 }}              transition={{ duration: 0.4, delay: idx * 0.1 }}              className="bg-muted rounded-lg p-3"            >              <div className="flex justify-between items-start mb-2">                <div>                  <div className="text-xs font-mono text-muted-foreground">                    {sku.sku}                  </div>                  <div className="text-sm font-medium text-foreground">                    {sku.name}                  </div>                </div>                <span                  className={`text-xs font-bold uppercase ${getVelocityColor(sku.velocity)}`}                >                  {sku.velocity}                </span>              </div>              <div className="flex justify-between text-xs">                <span className="text-muted-foreground">                  Sales:{" "}                  <span className="font-medium text-foreground">                    {sku.sales}                  </span>                </span>                <span className="text-muted-foreground">                  Margin:{" "}                  <span className="font-medium text-emerald-500">                    {sku.margin}%                  </span>                </span>              </div>            </motion.div>          ))}        </div>      </div>    </motion.div>  );};