import { Card } from "@heroui/react";
import { Activity, BookOpenCheck, ClipboardCheck, FileCheck2, LogIn } from "lucide-react";
import type { DashboardActividad } from "@/lib/data/dashboard";
import { formatDisplayName } from "@/lib/format-display";

export default function DashboardActividadCard({ actividad }: { actividad: DashboardActividad[] }) {
  return (
    <Card className="dashboard-card h-full gap-4 border border-zinc-200/70 p-5 shadow-none sm:p-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-base font-semibold text-zinc-800">Actividad reciente</h2>
          <p className="mt-1 text-xs text-zinc-500">Últimos 3 eventos de tus aulas</p>
        </div>
        <Activity className="size-5 text-zinc-400" aria-hidden="true" />
      </div>
      {actividad.length === 0 ? (
        <p className="py-6 text-sm leading-relaxed text-zinc-500">
          Aquí aparecerán las clases completadas, evaluaciones finalizadas y otras actividades
          registradas.
        </p>
      ) : (
        <ul className="divide-y divide-zinc-100">
          {actividad.slice(0, 3).map((item) => {
            const Icon = {
              entrega: FileCheck2,
              acceso: LogIn,
              clase: BookOpenCheck,
              evaluacion: ClipboardCheck,
            }[item.tipo];
            return (
              <li key={item.id} className="flex items-start gap-3 py-3 first:pt-1 last:pb-0">
                <span
                  className={`mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full ${item.tipo === "entrega" ? "bg-[#9d2449]/8 text-[#9d2449]" : "bg-zinc-100 text-zinc-500"}`}
                >
                  <Icon className="size-3.5" aria-hidden="true" />
                </span>
                <div className="min-w-0 flex-1">
                  <p className="text-sm font-medium text-zinc-800">
                    {formatDisplayName(item.titulo)}
                  </p>
                  <p className="mt-0.5 break-words text-xs text-zinc-500">
                    {formatDisplayName(item.detalle)}
                  </p>
                  <time dateTime={item.fecha} className="mt-1 block text-[10px] text-zinc-400">
                    {new Intl.DateTimeFormat("es-MX", {
                      day: "numeric",
                      month: "short",
                      hour: "2-digit",
                      minute: "2-digit",
                      timeZone: "America/Mexico_City",
                    }).format(new Date(item.fecha))}
                  </time>
                </div>
              </li>
            );
          })}
        </ul>
      )}
    </Card>
  );
}