'use client';import React from "react";import { DollarSign, 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 BreakdownItem {  category: string;  value: number;  percentage: number;  [key: string]: any;}interface InventoryValueCardProps {  className?: string;  title?: string;  description?: string;  valueChange?: number;  breakdown?: BreakdownItem[];}const DEFAULT_TITLE = "Inventory Value";const DEFAULT_DESCRIPTION = "Stock Valuation";const DEFAULT_VALUE_CHANGE = 5.2;const DEFAULT_BREAKDOWN: BreakdownItem[] = [  { category: "Finished Goods", value: 450000, percentage: 60 },  { category: "Raw Materials", value: 225000, percentage: 30 },  { category: "Work in Progress", value: 75000, percentage: 10 },];export const InventoryValueCard: React.FC<InventoryValueCardProps> = ({  className = "",  title = DEFAULT_TITLE,  description = DEFAULT_DESCRIPTION,  valueChange = DEFAULT_VALUE_CHANGE,  breakdown = DEFAULT_BREAKDOWN,}) => {  const isInteractive = true;  const index = 20;  const totalValue = breakdown.reduce((sum, item) => sum + item.value, 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">          <DollarSign className="h-5 w-5 text-emerald-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">            ${(totalValue / 1000).toFixed(0)}K          </div>          <div className="flex items-center gap-1 text-sm">            <TrendingUp className="h-4 w-4 text-emerald-500" />            <span className="text-emerald-500 font-medium">              +{valueChange}%            </span>          </div>        </div>        <p className="text-sm text-muted-foreground mb-4">          Total inventory value        </p>        {/* Pie chart representation */}        <div className="flex gap-1 h-3 rounded-full overflow-hidden mb-4">          {breakdown.map((item, idx) => (            <motion.div              key={idx}              initial={{ width: 0 }}              animate={{ width: `${item.percentage}%` }}              transition={{ duration: 0.8, delay: idx * 0.1 }}              className={`h-full ${idx === 0                  ? "bg-blue-500"                  : idx === 1                    ? "bg-purple-500"                    : "bg-emerald-500"                }`}              title={item.category}            />          ))}        </div>        <div className="space-y-2">          {breakdown.map((item, idx) => (            <div key={idx} className="flex justify-between items-center">              <div className="flex items-center gap-2">                <div                  className={`w-3 h-3 rounded-full ${idx === 0                      ? "bg-blue-500"                      : idx === 1                        ? "bg-purple-500"                        : "bg-emerald-500"                    }`}                />                <span className="text-sm text-foreground">{item.category}</span>              </div>              <div className="flex items-center gap-2">                <span className="text-sm font-bold text-foreground">                  ${(item.value / 1000).toFixed(0)}K                </span>                <span className="text-xs text-muted-foreground">                  ({item.percentage}%)                </span>              </div>            </div>          ))}        </div>      </div>    </motion.div>  );};