'use client'import React from 'react';import { Activity, TrendingUp } from 'lucide-react';import { motion } from 'motion/react';import { clsx, type ClassValue } from "clsx"import { twMerge } from "tailwind-merge"import { ResponsiveContainer, AreaChart, Area, XAxis, YAxis, Tooltip, ReferenceLine } from 'recharts';function cn(...inputs: ClassValue[]) {   return twMerge(clsx(inputs))}interface RocData {   x: number;   y: number;   [key: string]: any;}interface RocAucCardProps {   className?: string;   title?: string;   aucScore?: number;   qualityLabel?: string;   subtitle?: string;   data?: RocData[];}const DEFAULT_DATA: RocData[] = [   { x: 0, y: 0 },   { x: 0.1, y: 0.5 },   { x: 0.2, y: 0.7 },   { x: 0.3, y: 0.8 },   { x: 0.4, y: 0.88 },   { x: 0.5, y: 0.92 },   { x: 0.6, y: 0.95 },   { x: 0.7, y: 0.97 },   { x: 0.8, y: 0.98 },   { x: 0.9, y: 0.99 },   { x: 1, y: 1 },];const DEFAULT_TITLE = "ROC Curve";const DEFAULT_AUC_SCORE = 0.96;const DEFAULT_QUALITY_LABEL = "Excellent";const DEFAULT_SUBTITLE = "Area Under Curve";export const RocAucCard: React.FC<RocAucCardProps> = ({   className = "",   title = DEFAULT_TITLE,   aucScore = DEFAULT_AUC_SCORE,   qualityLabel = DEFAULT_QUALITY_LABEL,   subtitle = DEFAULT_SUBTITLE,   data = DEFAULT_DATA,}) => {   return (      <motion.div         initial={{ opacity: 0, y: 20 }}         animate={{ opacity: 1, y: 0 }}         transition={{ duration: 0.5, delay: 0.2 }}         className={cn(            "relative overflow-hidden rounded-2xl border border-border bg-card text-card-foreground shadow-sm transition-all hover:border-purple-300 dark:hover:border-purple-700 hover:shadow-md flex flex-col h-full",            className         )}      >         <div className="p-5 flex flex-col h-full relative z-10">            <div className="mb-4 flex items-start justify-between">               <div>                  <h3 className="font-bold text-lg text-foreground">                     {title}                  </h3>                  <div className="flex items-center gap-2 mt-1">                     <span className="text-2xl font-bold text-foreground">{aucScore}</span>                     <span className="text-xs font-medium text-emerald-500 bg-emerald-500/10 px-1.5 py-0.5 rounded-full">                        {qualityLabel}                     </span>                  </div>                  <p className="text-sm text-muted-foreground mt-1">                     {subtitle}                  </p>               </div>               <div className="rounded-lg border-2 border-purple-100 dark:border-purple-800 p-2 text-purple-500 dark:text-purple-400 flex items-center justify-center">                  <Activity className="h-5 w-5" />               </div>            </div>            <div className="flex-1 w-full min-h-[140px] relative">               <ResponsiveContainer width="100%" height="100%">                  <AreaChart data={data}>                     <defs>                        <linearGradient id="rocGradient" x1="0" y1="0" x2="0" y2="1">                           <stop offset="5%" stopColor="#a855f7" stopOpacity={0.3} />                           <stop offset="95%" stopColor="#a855f7" stopOpacity={0} />                        </linearGradient>                     </defs>                     <XAxis dataKey="x" hide />                     <YAxis hide domain={[0, 1]} />                     <Tooltip                        cursor={{ strokeDasharray: '3 3' }}                        content={() => null}                     />                     <ReferenceLine                        segment={[{ x: 0, y: 0 }, { x: 1, y: 1 }]}                        stroke="#e4e4e7"                        strokeDasharray="3 3"                     />                     <Area                        type="monotone"                        dataKey="y"                        stroke="#a855f7"                        strokeWidth={3}                        fill="url(#rocGradient)"                     />                  </AreaChart>               </ResponsiveContainer>            </div>            <div className="absolute -bottom-4 -right-4 z-0 opacity-5 pointer-events-none">               <TrendingUp className="w-40 h-40 text-purple-500" />            </div>         </div>      </motion.div>   );};