'use client';import React from "react";import { Zap, Clock } 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 {  metric: string;  orders: number;  percentage: number;  time: string;  color: string;  [key: string]: any;}interface FulfillmentSpeedCardProps {  className?: string;  title?: string;  description?: string;  averageTime?: string;  within24Hours?: string;  metrics?: Metric[];}const DEFAULT_TITLE = "Fulfillment Speed";const DEFAULT_DESCRIPTION = "Processing Time";const DEFAULT_AVERAGE_TIME = "18h";const DEFAULT_WITHIN_24_HOURS = "73% within 24 hours";const DEFAULT_METRICS: Metric[] = [  {    metric: "Same Day",    orders: 145,    percentage: 28,    time: "<4h",    color: "bg-emerald-500",  },  {    metric: "Next Day",    orders: 234,    percentage: 45,    time: "<24h",    color: "bg-blue-500",  },  {    metric: "2-3 Days",    orders: 98,    percentage: 19,    time: "<72h",    color: "bg-amber-500",  },  {    metric: "4+ Days",    orders: 42,    percentage: 8,    time: ">72h",    color: "bg-red-500",  },];export const FulfillmentSpeedCard: React.FC<FulfillmentSpeedCardProps> = ({  className = "",  title = DEFAULT_TITLE,  description = DEFAULT_DESCRIPTION,  averageTime = DEFAULT_AVERAGE_TIME,  within24Hours = DEFAULT_WITHIN_24_HOURS,  metrics = DEFAULT_METRICS,}) => {  const isInteractive = true;  const index = 33;  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">          <Zap 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">            {averageTime}          </div>          <span className="text-sm text-muted-foreground">avg time</span>        </div>        <p className="text-sm text-emerald-500 mb-4">{within24Hours}</p>        <div className="space-y-3">          {metrics.map((item, idx) => (            <div key={idx}>              <div className="flex justify-between items-center mb-1">                <div className="flex items-center gap-2">                  <span className="text-sm text-foreground">{item.metric}</span>                  <span className="text-xs text-muted-foreground">                    {item.time}                  </span>                </div>                <div className="flex items-center gap-2">                  <span className="text-xs text-muted-foreground">                    {item.orders} orders                  </span>                  <span className="text-sm font-bold text-foreground">                    {item.percentage}%                  </span>                </div>              </div>              <div className="flex items-center gap-2">                <div className="flex-1 bg-zinc-100 dark:bg-zinc-800 rounded-full h-2 overflow-hidden">                  <motion.div                    initial={{ width: 0 }}                    animate={{ width: `${item.percentage}%` }}                    transition={{ duration: 1, delay: idx * 0.1 }}                    className={`h-full ${item.color} rounded-full`}                  />                </div>              </div>            </div>          ))}        </div>      </div>    </motion.div>  );};