'use client'import React from 'react';import { FileText, Shield, User, LucideIcon } from 'lucide-react';import { motion } from 'motion/react';import { clsx, type ClassValue } from "clsx"import { twMerge } from "tailwind-merge"import { ResponsiveContainer, BarChart, Bar, Tooltip, XAxis } from 'recharts';function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs))}const iconMap: Record<string, LucideIcon> = {  Shield: Shield,  User: User,  FileText: FileText,};interface ActivityData {  time: string;  events: number;}interface Log {  id: number;  action: string;  user: string;  time: string;  iconName: string;  color: string;}interface AuditLogCardProps {  isInteractive?: boolean;  className?: string;  title?: string;  eventCount?: number;  eventLabel?: string;  activityData?: ActivityData[];  logs?: Log[];}const DEFAULT_TITLE = "Audit Log";const DEFAULT_EVENT_COUNT = 36;const DEFAULT_EVENT_LABEL = "Events Today";const DEFAULT_ACTIVITY_DATA: ActivityData[] = [  { time: '10am', events: 4 },  { time: '11am', events: 7 },  { time: '12pm', events: 3 },  { time: '1pm', events: 8 },  { time: '2pm', events: 5 },  { time: '3pm', events: 9 },];const DEFAULT_LOGS: Log[] = [  { id: 1, action: 'Large Transfer', user: 'CFO', time: '2h ago', iconName: 'Shield', color: 'text-emerald-500' },  { id: 2, action: 'New Vendor', user: 'Ops Lead', time: '5h ago', iconName: 'User', color: 'text-blue-500' },  { id: 3, action: 'Payroll Run', user: 'System', time: '1d ago', iconName: 'FileText', color: 'text-amber-500' },];export const AuditLogCard: React.FC<AuditLogCardProps> = ({  isInteractive = true,  className = "",  title = DEFAULT_TITLE,  eventCount = DEFAULT_EVENT_COUNT,  eventLabel = DEFAULT_EVENT_LABEL,  activityData = DEFAULT_ACTIVITY_DATA,  logs = DEFAULT_LOGS,}) => {  const index = 41;  return (    <motion.div      layoutId={isInteractive ? `card-${index}-${title}` : undefined}      transition={{ duration: 0.4, ease: "easeOut" }}      className={cn(        "relative overflow-hidden rounded-xl border border-border bg-card text-card-foreground p-5 shadow-sm transition-all flex flex-col h-full group",        isInteractive ? "cursor-pointer hover:border-primary/50 hover:shadow-md" : "",        className      )}    >      <div className="mb-2 flex items-start justify-between relative z-10">        <div>          <h3 className="font-semibold text-lg text-foreground">            {title}          </h3>          <div className="flex items-center gap-2 mt-1">            <span className="text-2xl font-bold text-foreground">{eventCount}</span>            <span className="text-xs text-muted-foreground">{eventLabel}</span>          </div>        </div>        <div className="h-10 w-24">          <ResponsiveContainer width="100%" height="100%">            <BarChart data={activityData}>              <Tooltip cursor={{ fill: 'transparent' }} contentStyle={{ borderRadius: '8px', border: 'none', backgroundColor: 'var(--tooltip-bg)', color: 'var(--tooltip-text)', fontSize: '10px', padding: '4px' }} itemStyle={{ padding: 0 }} />              <Bar dataKey="events" fill="#10b981" radius={[2, 2, 0, 0]} />            </BarChart>          </ResponsiveContainer>        </div>      </div>      <div className="relative z-10 flex-1">        <div className="space-y-3 mt-1">          {logs.map((log, i) => {            const Icon = iconMap[log.iconName] || FileText;            return (              <div key={log.id} className="flex items-start gap-3 py-2 border-b border-zinc-50 dark:border-zinc-800/50 last:border-0">                <div className={`mt-1 p-1 rounded-full bg-zinc-100 dark:bg-zinc-800 ${log.color}`}>                  <Icon className="w-3 h-3" />                </div>                <div className="flex-1">                  <div className="flex justify-between items-center">                    <div className="text-xs font-semibold text-foreground">{log.action}</div>                    <div className="text-[10px] text-muted-foreground">{log.time}</div>                  </div>                  <div className="text-[10px] text-muted-foreground">by {log.user}</div>                </div>              </div>            );          })}          <div className="pt-2 text-center">            <button className="text-xs font-medium text-emerald-500 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors">              View Full Log            </button>          </div>        </div>      </div>    </motion.div>  );};