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

const AuditEmptyState = ({
  title,
  description,
  children,
  compact = false,
  contained = false,
  className = "",
}) => (
  <div
    className={[
      "arraysubs-audit-empty",
      compact && "arraysubs-audit-empty--compact",
      contained && "arraysubs-audit-empty--contained",
      className,
    ]
      .filter(Boolean)
      .join(" ")}
    role="status"
  >
    <span className="arraysubs-audit-empty__icon" aria-hidden="true">
      <Inbox size={24} />
    </span>
    <h3 className="arraysubs-audit-empty__title">{title}</h3>
    {description && (
      <p className="arraysubs-audit-empty__description">{description}</p>
    )}
    {children && <div className="arraysubs-audit-empty__actions">{children}</div>}
  </div>
);

export default AuditEmptyState;