'use client'import React from 'react';import { Terminal } 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 LogEntry {   id: number;   pred: string;   conf: number;   time: string;   correct: boolean;   [key: string]: any;}interface InferenceFeedCardProps {   className?: string;   title?: string;   status?: string;   isConnected?: boolean;   logs?: LogEntry[];}const DEFAULT_LOGS: LogEntry[] = [   { id: 1, pred: 'Cat', conf: 0.98, time: '10:42:01', correct: true },   { id: 2, pred: 'Dog', conf: 0.85, time: '10:42:02', correct: true },   { id: 3, pred: 'Car', conf: 0.45, time: '10:42:05', correct: false }, // Low confidence];const DEFAULT_TITLE = "Live Feed";const DEFAULT_STATUS = "Connected";export const InferenceFeedCard: React.FC<InferenceFeedCardProps> = ({   className = "",   title = DEFAULT_TITLE,   status = DEFAULT_STATUS,   isConnected = true,   logs = DEFAULT_LOGS,}) => {   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-zinc-300 dark:hover:border-zinc-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={cn("text-sm font-medium flex items-center gap-1", isConnected ? "text-emerald-500" : "text-muted-foreground")}>                        <div className={cn("w-1.5 h-1.5 rounded-full animate-pulse", isConnected ? "bg-emerald-500" : "bg-gray-400")} />                        {status}                     </span>                  </div>               </div>               <div className="rounded-lg border-2 border-zinc-200 dark:border-zinc-700 p-2 text-muted-foreground flex items-center justify-center">                  <Terminal className="h-5 w-5" />               </div>            </div>            <div className="flex-1 space-y-2">               {logs.map((log) => (                  <div key={log.id} className="flex items-center justify-between p-2 rounded bg-muted border border-border">                     <div>                        <div className="flex items-center gap-2">                           <span className="font-bold text-sm text-foreground">{log.pred}</span>                           <span className={cn(                              "text-[10px] px-1.5 py-0.5 rounded",                              log.conf > 0.8 ? "text-emerald-600 bg-emerald-100 dark:bg-emerald-900/30" : "text-yellow-600 bg-yellow-100 dark:bg-yellow-900/30"                           )}>                              {(log.conf * 100).toFixed(0)}%                           </span>                        </div>                        <div className="w-24 h-1 bg-zinc-200 dark:bg-zinc-700 rounded-full mt-1.5 overflow-hidden">                           <motion.div                              initial={{ width: 0 }}                              animate={{ width: `${log.conf * 100}%` }}                              className={cn("h-full rounded-full", log.conf > 0.8 ? "bg-emerald-500" : "bg-yellow-500")}                           />                        </div>                     </div>                     <div className="text-xs font-mono text-muted-foreground">                        {log.time}                     </div>                  </div>               ))}            </div>            <div className="absolute -bottom-4 -right-4 z-0 opacity-5 pointer-events-none">               <Terminal className="w-40 h-40 text-muted-foreground" />            </div>         </div>      </motion.div>   );};