'use client'import React from 'react';import { Package, TrendingUp, AlertTriangle, Clock } from 'lucide-react';import { motion } from 'motion/react';import { clsx, type ClassValue } from "clsx"import { twMerge } from "tailwind-merge"import { ResponsiveContainer, RadialBarChart, RadialBar, PolarAngleAxis } from 'recharts';function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs))}interface InventoryData {  name: string;  value: number;  fill: string;  [key: string]: any;}interface InventoryTurnoverCardProps {  isInteractive?: boolean;  className?: string;  title?: string;  turnoverRate?: string;  periodLabel?: string;  velocityLabel?: string;  velocityStatus?: string;  daysSales?: string;  stockoutRisk?: string;  data?: InventoryData[];}const DEFAULT_TITLE = "Inventory";const DEFAULT_TURNOVER_RATE = "6.2x";const DEFAULT_PERIOD_LABEL = "Annual";const DEFAULT_VELOCITY_LABEL = "Velocity";const DEFAULT_VELOCITY_STATUS = "Good";const DEFAULT_DAYS_SALES = "58 Days";const DEFAULT_STOCKOUT_RISK = "Low";const DEFAULT_DATA: InventoryData[] = [{ name: 'ToR', value: 6.2, fill: '#10b981' }]; // Emeraldexport const InventoryTurnoverCard: React.FC<InventoryTurnoverCardProps> = ({  isInteractive = true,  className = "",  title = DEFAULT_TITLE,  turnoverRate = DEFAULT_TURNOVER_RATE,  periodLabel = DEFAULT_PERIOD_LABEL,  velocityLabel = DEFAULT_VELOCITY_LABEL,  velocityStatus = DEFAULT_VELOCITY_STATUS,  daysSales = DEFAULT_DAYS_SALES,  stockoutRisk = DEFAULT_STOCKOUT_RISK,  data = DEFAULT_DATA,}) => {  const index = 32;  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-5 shadow-sm transition-all flex flex-col h-full group",        isInteractive ? "cursor-pointer hover:border-primary/50 hover:shadow-md" : "",        className      )}    >      <div className="mb-2 flex items-start justify-between relative z-10">        <div>          <h3 className="font-semibold text-lg text-foreground">            {title}          </h3>          <div className="flex items-center gap-2 mt-1">            <span className="text-2xl font-bold text-foreground">{turnoverRate}</span>            <span className="text-xs bg-emerald-500/10 text-emerald-600 px-1.5 py-0.5 rounded-full flex items-center gap-0.5">              <TrendingUp className="w-3 h-3" /> {periodLabel}            </span>          </div>        </div>        <div className="rounded-lg bg-emerald-500/10 p-2 text-emerald-500">          <Package className="h-5 w-5" />        </div>      </div>      <div className="relative z-10 flex-1 grid grid-cols-2 gap-2">        <div className="h-full w-full relative flex items-center justify-center">          <div className="h-28 w-28 relative">            <ResponsiveContainer width="100%" height="100%">              <RadialBarChart cx="50%" cy="50%" innerRadius="60%" outerRadius="90%" barSize={8} data={data} startAngle={180} endAngle={0}>                <PolarAngleAxis type="number" domain={[0, 10]} angleAxisId={0} tick={false} />                <RadialBar background={{ fill: 'var(--chart-bg, #f4f4f5)' }} dataKey="value" cornerRadius={10} />              </RadialBarChart>            </ResponsiveContainer>            <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none pb-4" aria-hidden="true">              <span className="text-[10px] text-muted-foreground">{velocityLabel}</span>              <span className="text-sm font-bold text-foreground">{velocityStatus}</span>            </div>          </div>        </div>        <div className="flex flex-col justify-center space-y-3 pr-2">          <div className="flex items-start gap-2">            <Clock className="w-4 h-4 text-muted-foreground mt-0.5" />            <div>              <span className="block text-[10px] text-muted-foreground uppercase tracking-wide">Days Sales</span>              <span className="block text-sm font-bold text-foreground">{daysSales}</span>            </div>          </div>          <div className="flex items-start gap-2">            <AlertTriangle className="w-4 h-4 text-amber-500 mt-0.5" />            <div>              <span className="block text-[10px] text-muted-foreground uppercase tracking-wide">Stockout Risk</span>              <span className="block text-sm font-bold text-foreground">{stockoutRisk}</span>            </div>          </div>        </div>      </div>      <div className="absolute -bottom-4 -right-4 z-0 opacity-[0.03] pointer-events-none">        <Package className="w-24 h-24 text-foreground" />      </div>    </motion.div>  );};