import React from "react";

export interface ErrorStateProps {
  icon?: React.ReactNode;
  title: string;
  subtitle?: string;
  action?: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

export function ErrorState({
  icon,
  title,
  subtitle,
  action,
  className = "",
  style,
}: ErrorStateProps) {
  return (
    <div
      role="alert"
      className={`error-state ${className}`}
      style={{
        background: "rgba(239, 68, 68, 0.05)",
        border: "1px solid rgba(239, 68, 68, 0.25)",
        borderRadius: "var(--radius-md, 2px)",
        textAlign: "center",
        padding: "var(--space-8, 2rem)",
        color: "var(--text-secondary, #A7A3B4)",
        ...style,
      }}
    >
      {icon && (
        <div style={{ marginBottom: "var(--space-3, 0.75rem)", color: "var(--color-error, #EF4444)" }}>
          {icon}
        </div>
      )}
      <p
        style={{
          fontWeight: 600,
          marginBottom: subtitle ? "var(--space-1, 0.25rem)" : 0,
          color: "var(--text-primary, #F6F4F8)",
          fontSize: "var(--text-sm, 0.875rem)",
        }}
      >
        {title}
      </p>
      {subtitle && (
        <p
          style={{
            fontSize: "var(--text-sm, 0.875rem)",
            marginBottom: action ? "var(--space-4, 1rem)" : 0,
            color: "var(--text-tertiary, #6D697C)",
          }}
        >
          {subtitle}
        </p>
      )}
      {action && <div>{action}</div>}
    </div>
  );
}