"use client";

import React from "react";
import { AlertCircle } from "lucide-react";

export interface ErrorMessageProps {
  message?: string | null;
  className?: string;
  style?: React.CSSProperties;
  /** Whether to show the danger indicator icon */
  showIcon?: boolean;
}

/**
 * EasyUI-inspired Form Error Message.
 * Displays input validation errors with subtle shake and danger tone.
 */
export function ErrorMessage({
  message,
  className = "",
  style,
  showIcon = true,
}: ErrorMessageProps) {
  if (!message) return null;

  return (
    <div
      role="alert"
      className={`form-error-message ${className}`}
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 5,
        marginTop: "var(--space-1, 0.25rem)",
        fontSize: "var(--text-xs, 0.75rem)",
        color: "var(--color-error, #EF4444)",
        fontWeight: 500,
        animation: "easyui-shake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both",
        ...style,
      }}
    >
      {showIcon && <AlertCircle size={13} style={{ flexShrink: 0 }} />}
      <span>{message}</span>
    </div>
  );
}