/**
 * 统一的 ErrorState 组件
 * 用于显示错误状态
 */
import React from "react";
import { AlertCircle } from "lucide-react";
import { Button } from "../ui/Button";
import { ButtonText, ErrorText } from "../../constants";

export interface ErrorStateProps {
  title?: string;
  message: string;
  onRetry?: () => void;
  retryLabel?: string;
}

export const ErrorState: React.FC<ErrorStateProps> = ({
  title = ErrorText.ERROR_OCCURRED,
  message,
  onRetry,
  retryLabel = ButtonText.RETRY,
}) => {
  return (
    <div className="flex items-center gap-3 p-4 bg-red-900/20 border border-red-500/50 rounded-lg text-red-400">
      <AlertCircle className="w-5 h-5 flex-shrink-0" />
      <div className="flex-1">
        {title && <p className="font-medium">{title}</p>}
        <p className={title ? "text-sm mt-1" : ""}>{message}</p>
      </div>
      {onRetry && (
        <Button variant="danger" size="sm" onClick={onRetry}>
          {retryLabel}
        </Button>
      )}
    </div>
  );
};

