import Link from "next/link";
import { clsx } from "clsx";
import type { AttentionAlert as AlertType } from "@/lib/types";

const severityColor: Record<string, string> = {
  warning: "bg-warning",
  error: "bg-error",
  info: "bg-accent",
};

export function AttentionAlertRow({ alert }: { alert: AlertType }) {
  return (
    <div className="flex items-center justify-between gap-3 px-4 py-2.5 rounded-lg bg-surface border border-border-light">
      <div className="flex items-center gap-3 min-w-0">
        <span
          className={clsx(
            "w-2 h-2 rounded-full shrink-0",
            severityColor[alert.severity] || "bg-text-muted"
          )}
        />
        <span className="text-sm text-text-primary truncate">{alert.message}</span>
      </div>
      <Link
        href={alert.actionUrl}
        className="shrink-0 text-xs font-medium text-accent hover:text-accent-hover transition-colors px-3 py-1 rounded-md border border-border hover:border-accent/40"
      >
        {alert.actionLabel}
      </Link>
    </div>
  );
}