'use client'import React from 'react';import { Sliders, Settings } from 'lucide-react';import { motion } from 'motion/react';import { clsx, type ClassValue } from "clsx"import { twMerge } from "tailwind-merge"import { ResponsiveContainer, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, Tooltip, Legend } from 'recharts';function cn(...inputs: ClassValue[]) {   return twMerge(clsx(inputs))}interface HyperparameterData {   param: string;   current: number;   best: number;   fullMark: number;   [key: string]: any;}interface HyperparameterCardProps {   className?: string;   title?: string;   comparisonLabel?: string;   data?: HyperparameterData[];}const DEFAULT_DATA: HyperparameterData[] = [   { param: 'LR', current: 80, best: 90, fullMark: 100 },   { param: 'Batch', current: 60, best: 85, fullMark: 100 },   { param: 'Epochs', current: 100, best: 100, fullMark: 100 },   { param: 'Drop', current: 50, best: 40, fullMark: 100 },   { param: 'Layers', current: 70, best: 95, fullMark: 100 },];const DEFAULT_TITLE = "Parameters";const DEFAULT_COMPARISON_LABEL = "Comparing v4 vs v3";export const HyperparameterCard: React.FC<HyperparameterCardProps> = ({   className = "",   title = DEFAULT_TITLE,   comparisonLabel = DEFAULT_COMPARISON_LABEL,   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-primary/50 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">                     <div className="flex -space-x-1">                        <div className="w-5 h-5 rounded-full bg-violet-100 dark:bg-violet-900 border-2 border-white dark:border-zinc-900"></div>                        <div className="w-5 h-5 rounded-full bg-zinc-200 dark:bg-zinc-700 border-2 border-white dark:border-zinc-900"></div>                     </div>                     <span className="text-xs font-medium text-muted-foreground">                        {comparisonLabel}                     </span>                  </div>               </div>               <div className="rounded-lg border-2 border-violet-100 dark:border-violet-800 p-2 text-violet-500 dark:text-violet-400 flex items-center justify-center">                  <Sliders className="h-5 w-5" />               </div>            </div>            <div className="flex-1 w-full min-h-[160px] relative -ml-2">               <ResponsiveContainer width="100%" height="100%">                  <RadarChart cx="50%" cy="50%" outerRadius="70%" data={data}>                     <PolarGrid stroke="#e4e4e7" strokeOpacity={0.5} />                     <PolarAngleAxis                        dataKey="param"                        tick={{ fontSize: 9, fill: '#71717a', fontWeight: 600 }}                     />                     <PolarRadiusAxis angle={30} domain={[0, 100]} tick={false} axisLine={false} />                     <Radar                        name="Current"                        dataKey="current"                        stroke="#8b5cf6"                        strokeWidth={2}                        fill="#8b5cf6"                        fillOpacity={0.3}                     />                     <Radar                        name="Best"                        dataKey="best"                        stroke="#e4e4e7"                        strokeWidth={2}                        fill="#e4e4e7"                        fillOpacity={0.3}                     />                     <Tooltip                        cursor={false}                        content={() => null}                     />                     <Legend iconSize={8} align="right" verticalAlign="middle" layout="vertical" wrapperStyle={{ fontSize: 9 }} />                  </RadarChart>               </ResponsiveContainer>            </div>            <div className="absolute -bottom-4 -right-4 z-0 opacity-5 pointer-events-none">               <Settings className="w-40 h-40 text-violet-500" />            </div>         </div>      </motion.div>   );};