'use client'import React from 'react';import { FileText, GitCommit } 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 AuditEvent {   id: number;   title: string;   user: string;   action: string;   time: string;   color: string;}interface AuditTrailCardProps {   className?: string;   title?: string;   eventsCount?: string;   subtitle?: string;   events?: AuditEvent[];}const DEFAULT_EVENTS: AuditEvent[] = [   {      id: 1,      title: 'Model Promoted',      user: 'jdoe',      action: 'to prod',      time: '2h ago',      color: 'emerald',   },   {      id: 2,      title: 'Retraining Started',      user: 'system',      action: 'auto-trigger',      time: '5h ago',      color: 'blue',   },];const DEFAULT_TITLE = "Audit Log";const DEFAULT_EVENTS_COUNT = "12";const DEFAULT_SUBTITLE = "events today";export const AuditTrailCard: React.FC<AuditTrailCardProps> = ({   className = "",   title = DEFAULT_TITLE,   eventsCount = DEFAULT_EVENTS_COUNT,   subtitle = DEFAULT_SUBTITLE,   events = DEFAULT_EVENTS,}) => {   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="text-2xl font-bold text-foreground">{eventsCount}</span>                     <span className="text-xs font-medium text-muted-foreground">                        {subtitle}                     </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">                  <FileText className="h-5 w-5" />               </div>            </div>            <div className="flex-1 relative pl-2">               <div className="absolute left-[7px] top-2 bottom-2 w-px bg-zinc-200 dark:bg-zinc-800" />               <div className="space-y-4">                  {events.map((event) => (                     <div key={event.id} className="relative pl-5">                        <div className={cn(                           "absolute left-0 top-1.5 w-3.5 h-3.5 rounded-full bg-zinc-100 dark:bg-zinc-800 border-2 z-10",                           event.color === 'emerald' ? "border-emerald-500" : "border-blue-500"                        )} />                        <div className="text-xs font-bold text-foreground">{event.title}</div>                        <div className="text-[10px] text-muted-foreground">                           <span className="font-medium text-foreground">{event.user}</span> {event.action}                           <span className="ml-2 text-muted-foreground">{event.time}</span>                        </div>                     </div>                  ))}               </div>            </div>            <div className="absolute -bottom-4 -right-4 z-0 opacity-5 pointer-events-none">               <GitCommit className="w-40 h-40 text-muted-foreground" />            </div>         </div>      </motion.div>   );};