import type { ReactElement } from "react";

export type LogLevel = "info" | "warn" | "error" | "debug" | "success";

export interface LogLineProps {
  timestamp: string;
  level: LogLevel;
  message: string;
  className?: string;
}

const levelColors: Record<LogLevel, string> = {
  info: "var(--primary-l)",
  warn: "var(--warn)",
  error: "var(--danger)",
  debug: "var(--muted)",
  success: "var(--success)",
};

export function LogLine({ timestamp, level, message, className = "" }: LogLineProps): ReactElement {
  return (
    <div
      className={className}
      style={{
        display: "grid",
        gridTemplateColumns: "100px 50px 1fr",
        gap: 10,
        padding: "4px 0",
        fontFamily: "var(--mono)",
        fontSize: "0.76rem",
        borderBottom: "1px solid rgba(47,59,82,0.3)",
        alignItems: "start",
      }}
    >
      <span style={{ color: "var(--muted)" }}>{timestamp}</span>
      <span style={{ fontWeight: 600, color: levelColors[level] }}>{level}</span>
      <span style={{ color: "var(--text-2)", wordBreak: "break-all" }}>{message}</span>
    </div>
  );
}
