'use client'import React from 'react';import { BrainCircuit, Check } 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 AlgorithmItem {   name: string;   score: string;   isActive: boolean;   id: number;}interface AlgorithmStatusCardProps {   className?: string;   title?: string;   subtitle?: string;   algorithms?: AlgorithmItem[];}const DEFAULT_ALGORITHMS: AlgorithmItem[] = [   { id: 1, name: 'XGBoost Classifier', score: 'AutoML Score: 0.94', isActive: true },   { id: 2, name: 'Random Forest', score: 'Score: 0.89', isActive: false },];const DEFAULT_TITLE = "Algorithm";const DEFAULT_SUBTITLE = "Active Selection";export const AlgorithmStatusCard: React.FC<AlgorithmStatusCardProps> = ({   className = "",   title = DEFAULT_TITLE,   subtitle = DEFAULT_SUBTITLE,   algorithms = DEFAULT_ALGORITHMS,}) => {   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-cyan-300 dark:hover:border-cyan-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>                  <p className="text-sm text-muted-foreground font-medium">                     {subtitle}                  </p>               </div>               <div className="rounded-lg border-2 border-cyan-100 dark:border-cyan-800 p-2 text-cyan-500 dark:text-cyan-400 flex items-center justify-center">                  <BrainCircuit className="h-5 w-5" />               </div>            </div>            <div className="flex-1 space-y-2">               {algorithms.map((algo) => (                  <div                     key={algo.id}                     className={cn(                        "p-3 rounded-xl border flex items-center justify-between",                        algo.isActive                           ? "bg-cyan-50 dark:bg-cyan-900/20 border-cyan-200 dark:border-cyan-800"                           : "bg-muted border border-border opacity-60"                     )}                  >                     <div>                        <div className="text-sm font-bold text-foreground">{algo.name}</div>                        <div className="text-[10px] text-muted-foreground">{algo.score}</div>                     </div>                     {algo.isActive && (                        <div className="h-6 w-6 rounded-full bg-cyan-500 text-white flex items-center justify-center shadow-sm">                           <Check className="w-4 h-4" />                        </div>                     )}                  </div>               ))}            </div>            <div className="absolute -bottom-4 -right-4 z-0 opacity-5 pointer-events-none">               <BrainCircuit className="w-40 h-40 text-cyan-500" />            </div>         </div>      </motion.div>   );};