'use client';import React from "react";import { RotateCcw, AlertTriangle } 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 WeeklyData {  week: string;  rate: number;  [key: string]: any;}interface RefundRateCardProps {  className?: string;  title?: string;  description?: string;  currentRate?: number;  avgRate?: number;  totalRefunds?: string;  refundAmount?: string;  weeklyData?: WeeklyData[];}const DEFAULT_TITLE = "Refund Rate";const DEFAULT_DESCRIPTION = "Returns & Refunds";const DEFAULT_CURRENT_RATE = 2.5;const DEFAULT_AVG_RATE = 3.0;const DEFAULT_TOTAL_REFUNDS = "156";const DEFAULT_REFUND_AMOUNT = "$12,450";const DEFAULT_WEEKLY_DATA: WeeklyData[] = [  { week: "W1", rate: 3.2 },  { week: "W2", rate: 2.8 },  { week: "W3", rate: 3.5 },  { week: "W4", rate: 2.5 },];export const RefundRateCard: React.FC<RefundRateCardProps> = ({  className = "",  title = DEFAULT_TITLE,  description = DEFAULT_DESCRIPTION,  currentRate = DEFAULT_CURRENT_RATE,  avgRate = DEFAULT_AVG_RATE,  totalRefunds = DEFAULT_TOTAL_REFUNDS,  refundAmount = DEFAULT_REFUND_AMOUNT,  weeklyData = DEFAULT_WEEKLY_DATA,}) => {  const isInteractive = true;  const index = 10;  const rateChange = (((currentRate - avgRate) / avgRate) * 100).toFixed(1);  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">          <RotateCcw className="h-5 w-5 text-amber-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">            {currentRate}%          </div>          <div className="flex items-center gap-1 text-sm">            <span className="text-emerald-500 font-medium">{rateChange}%</span>            <span className="text-muted-foreground">vs avg</span>          </div>        </div>        <div className="bg-emerald-500/10 border border-emerald-200 dark:border-emerald-800 rounded-lg p-2 mb-4">          <div className="flex items-center gap-2 text-xs text-emerald-700 dark:text-emerald-400">            <span className="font-medium">              Below industry average of {avgRate}%            </span>          </div>        </div>        <div className="space-y-3">          <div className="text-xs text-muted-foreground mb-2">Weekly Trend</div>          {weeklyData.map((item, idx) => (            <div key={idx} className="flex items-center gap-2">              <span className="text-xs text-muted-foreground w-8">                {item.week}              </span>              <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.rate / 5) * 100}%` }}                  transition={{ duration: 1, delay: idx * 0.1 }}                  className={`h-full rounded-full ${item.rate <= 2.5                      ? "bg-emerald-500"                      : item.rate <= 3.0                        ? "bg-amber-500"                        : "bg-red-500"                    }`}                />              </div>              <span className="text-xs font-medium text-foreground w-10 text-right">                {item.rate}%              </span>            </div>          ))}        </div>        <div className="mt-4 pt-4 border-t border-border grid grid-cols-2 gap-4 text-xs">          <div>            <div className="text-muted-foreground mb-1">Total Refunds</div>            <div className="font-bold text-foreground">{totalRefunds}</div>          </div>          <div>            <div className="text-muted-foreground mb-1">Refund Amount</div>            <div className="font-bold text-foreground">{refundAmount}</div>          </div>        </div>      </div>    </motion.div>  );};