'use client';

import { motion } from 'framer-motion';

type ActivityType = 'create' | 'update' | 'delete' | 'submit' | 'offer' | 'join' | 'reject' | 'interview' | 'apply';

export interface Activity {
  id: number;
  type: ActivityType;
  message: string;
  time: string;
}

const TYPE_CFG: Record<ActivityType, { icon: string; color: string }> = {
  create:    { icon: 'fa-solid fa-circle-plus',    color: 'text-emerald-500' },
  update:    { icon: 'fa-solid fa-pen',             color: 'text-blue-500'    },
  delete:    { icon: 'fa-solid fa-circle-xmark',   color: 'text-rose-500'    },
  submit:    { icon: 'fa-solid fa-paper-plane',    color: 'text-indigo-500'  },
  offer:     { icon: 'fa-solid fa-envelope-open',  color: 'text-purple-500'  },
  join:      { icon: 'fa-solid fa-user-check',     color: 'text-teal-500'    },
  reject:    { icon: 'fa-solid fa-user-xmark',     color: 'text-red-500'     },
  interview: { icon: 'fa-solid fa-video',          color: 'text-amber-500'   },
  apply:     { icon: 'fa-solid fa-file-pen',       color: 'text-cyan-500'    },
};

export default function RecentActivity({ activities }: { activities: Activity[] }) {
  return (
    <div className="space-y-3">
      {activities.map((act, i) => {
        const cfg = TYPE_CFG[act.type] ?? TYPE_CFG.update;
        return (
          <motion.div
            key={act.id}
            initial={{ opacity: 0, x: 10 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: i * 0.06 }}
            className="flex items-start gap-3"
          >
            <div className="w-7 h-7 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center flex-shrink-0 mt-0.5">
              <i className={`${cfg.icon} ${cfg.color} text-xs`} />
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-xs text-slate-700 dark:text-slate-300 leading-snug">{act.message}</p>
              <p className="text-[10px] text-slate-400 dark:text-slate-500 mt-0.5">{act.time}</p>
            </div>
          </motion.div>
        );
      })}
    </div>
  );
}