import classNames from "classnames";
import { format } from "date-fns";
import type { ReactNode } from "react";

interface EventViewerRowProps {
  isActive: boolean;
  onClick: () => void;
  icon: ReactNode;
  content: ReactNode;
  timestamp?: string;
}

export function EventViewerRow({
  isActive,
  onClick,
  icon,
  content,
  timestamp,
}: EventViewerRowProps) {
  return (
    <div className="px-1">
      <button
        type="button"
        onClick={onClick}
        className={classNames(
          "w-full grid grid-cols-[auto_minmax(0,1fr)_auto] gap-2 items-center text-left",
          "px-1.5 h-xs font-mono text-editor cursor-default group focus:outline-none focus:text-text rounded",
          isActive && "bg-surface-active !text-text",
          "text-text-subtle hover:text",
        )}
      >
        {icon}
        <div className="w-full truncate">{content}</div>
        {timestamp && <div className="opacity-50">{format(`${timestamp}Z`, "HH:mm:ss.SSS")}</div>}
      </button>
    </div>
  );
}