import Link from "next/link";
import { ChevronRight, MoreHorizontal } from "lucide-react";

interface ActivityItem {
  id: string;
  primary: string;
  email: string;
  createdAt: string;
}

interface ActivitySectionProps {
  title: string;
  data: ActivityItem[];
  emptyMessage: string;
  href: string;
  accent: string;
  dotColor: string;
  formatTimestamp: (value: string) => string;
}

export default function ActivitySection({
  title,
  data,
  emptyMessage,
  href,
  accent, // Kept for compatibility but using new styling
  dotColor, // Kept for compatibility
  formatTimestamp,
}: ActivitySectionProps) {
  return (
    <div className="flex h-full flex-col overflow-hidden rounded-3xl border border-gray-100 bg-white shadow-lg">
      <div className="flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-4">
        <div className="flex items-center gap-2">
          <span className={`h-2.5 w-2.5 rounded-full ${dotColor}`} />
          <h3 className="text-sm font-semibold text-brand-ink">{title}</h3>
        </div>
        <Link
          href={href}
          className="group inline-flex items-center gap-1 rounded-full border border-gray-200 bg-white px-3 py-1 text-xs font-semibold text-gray-600 transition hover:-translate-y-0.5 hover:border-brand-green/40 hover:text-brand-green"
        >
          View all
          <ChevronRight className="h-3 w-3 transition-transform group-hover:translate-x-0.5" />
        </Link>
      </div>

      <div className="flex-1 overflow-y-auto px-2 py-3">
        {data.length > 0 ? (
          <ul className="space-y-2">
            {data.map((item) => {
              const [rawDate, rawTime] = formatTimestamp(item.createdAt).split(
                ",",
              );
              const datePart = rawDate?.trim() || "";
              const timePart = rawTime?.trim() || "";
              return (
                <li key={item.id}>
                  <Link href={href} className="block">
                    <div className="group relative flex items-center gap-4 rounded-2xl border border-transparent bg-white px-3 py-3 shadow-[0_1px_2px_rgba(16,24,40,0.06)] transition hover:-translate-y-0.5 hover:border-gray-200 hover:shadow-md">
                      <div className="absolute inset-y-3 left-0 w-1 rounded-full bg-gradient-to-b from-emerald-200 via-blue-200 to-indigo-200 opacity-0 transition-opacity group-hover:opacity-100" />
                      <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-gray-50 text-sm font-bold text-gray-700 ring-1 ring-gray-100">
                        {item.primary.charAt(0).toUpperCase()}
                      </div>

                      <div className="min-w-0 flex-1">
                        <p className="truncate text-sm font-semibold text-brand-ink group-hover:text-brand-green transition-colors">
                          {item.primary}
                        </p>
                        <p className="truncate text-xs text-gray-500">
                          {item.email}
                        </p>
                      </div>

                      <div className="text-right">
                        <p className="text-xs font-semibold text-gray-500">
                          {datePart}
                        </p>
                        <p className="text-[11px] text-gray-400">{timePart}</p>
                      </div>
                    </div>
                  </Link>
                </li>
              );
            })}
          </ul>
        ) : (
          <div className="flex h-48 flex-col items-center justify-center text-center">
            <div className="mb-3 rounded-full bg-gray-50 p-3">
              <MoreHorizontal className="h-5 w-5 text-gray-400" />
            </div>
            <p className="text-sm font-medium text-gray-900">No activity yet</p>
            <p className="mt-1 text-xs text-gray-500">{emptyMessage}</p>
          </div>
        )}
      </div>
    </div>
  );
}