/**
 * ErrorPopup — shows the full error message in a floating panel above
 * the journal input area. Toggled by clicking the truncated error text.
 */
import { Component, Show } from "solid-js";

interface ErrorPopupProps {
  message: string | null;
  show: boolean;
  onClose: () => void;
}

export const ErrorPopup: Component<ErrorPopupProps> = (props) => {
  return (
    <Show when={props.show && props.message}>
      <div class="absolute bottom-full left-2 right-2 mb-1 bg-red-50 border border-red-200 rounded shadow-lg z-50">
        <div class="flex items-start justify-between px-2 pt-2 pb-1">
          <p class="text-red-700 text-xs break-words">{props.message}</p>
          <button
            onClick={props.onClose}
            class="text-red-400 hover:text-red-600 text-xs leading-none ml-2 shrink-0"
            title="关闭"
          >
            ✕
          </button>
        </div>
      </div>
    </Show>
  );
};