'use client'import React from 'react';import { Database, GitCommit, GitPullRequest } 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 VersionEvent {   id: number;   title: string;   description: React.ReactNode;   meta: string;   isActive: boolean;   iconColorClass: string;   borderColorClass: string;}interface DatasetVersionCardProps {   className?: string;   title?: string;   version?: string;   commitHash?: string;   events?: VersionEvent[];}const DEFAULT_EVENTS: VersionEvent[] = [   {      id: 1,      title: 'New Data Added',      description: <span className="text-xs text-muted-foreground">2 mins ago by <span className="text-indigo-500">@data-team</span></span>,      meta: '14.2 GB',      isActive: true,      iconColorClass: 'bg-indigo-500',      borderColorClass: 'border-indigo-500'   },   {      id: 2,      title: 'Schema Update',      description: <span className="text-xs text-muted-foreground">1 day ago</span>,      meta: '',      isActive: false,      iconColorClass: 'bg-zinc-200 dark:bg-zinc-700',      borderColorClass: 'border-white dark:border-zinc-900'   },];const DEFAULT_TITLE = "Versions";const DEFAULT_VERSION = "v3.1.2";const DEFAULT_COMMIT_HASH = "d3ad...b33f";export const DatasetVersionCard: React.FC<DatasetVersionCardProps> = ({   className = "",   title = DEFAULT_TITLE,   version = DEFAULT_VERSION,   commitHash = DEFAULT_COMMIT_HASH,   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-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">                     <span className="text-lg font-bold text-indigo-500">{version}</span>                     <span className="text-[10px] text-zinc-400 font-mono">                        {commitHash}                     </span>                  </div>               </div>               <div className="rounded-lg border-2 border-indigo-100 dark:border-indigo-800 p-2 text-indigo-500 dark:text-indigo-400 flex items-center justify-center">                  <Database className="h-5 w-5" />               </div>            </div>            <div className="flex-1 relative pl-2">               <div className="absolute left-[11px] 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={cn("relative pl-6", !event.isActive && "opacity-60")}>                        <div className={cn(                           "absolute left-0 top-1 w-6 h-6 rounded-full bg-card text-card-foreground border-2 flex items-center justify-center z-10",                           event.borderColorClass                        )}>                           <div className={cn("w-1.5 h-1.5 rounded-full", event.isActive ? "bg-indigo-500" : "bg-transparent")} />                        </div>                        <div className={cn("text-sm", event.isActive ? "font-bold text-foreground" : "font-medium text-zinc-600 dark:text-muted-foreground")}>{event.title}</div>                        {event.description}                        {event.meta && <div className="mt-1 text-[10px] bg-muted p-1 rounded font-mono inline-block">{event.meta}</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-indigo-500" />            </div>         </div>      </motion.div>   );};