import React from "react";

export function Empty({ className = "", children, ...props }) {
  return <div className={["o-empty", className].filter(Boolean).join(" ")} data-slot="empty" {...props}>{children}</div>;
}
export function EmptyHeader({ className = "", children, ...props }) {
  return <div className={["o-empty__header", className].filter(Boolean).join(" ")} data-slot="empty-header" {...props}>{children}</div>;
}
export function EmptyMedia({ variant = "icon", className = "", children, ...props }) {
  if (variant !== "icon") return <div className={["o-empty__media", className].filter(Boolean).join(" ")} data-slot="empty-media" {...props}>{children}</div>;
  return (
    <div className={["o-empty__media", className].filter(Boolean).join(" ")} data-slot="empty-media" data-variant="icon" {...props}>
      <div className="o-empty__tile o-empty__tile--ghost o-empty__tile--ghost-l" aria-hidden="true" />
      <div className="o-empty__tile o-empty__tile--ghost o-empty__tile--ghost-r" aria-hidden="true" />
      <div className="o-empty__tile">{children}</div>
    </div>
  );
}
export function EmptyTitle({ className = "", children, ...props }) {
  return <div className={["o-empty__title", className].filter(Boolean).join(" ")} data-slot="empty-title" {...props}>{children}</div>;
}
export function EmptyDescription({ className = "", children, ...props }) {
  return <div className={["o-empty__description", className].filter(Boolean).join(" ")} data-slot="empty-description" {...props}>{children}</div>;
}
export function EmptyContent({ className = "", children, ...props }) {
  return <div className={["o-empty__content", className].filter(Boolean).join(" ")} data-slot="empty-content" {...props}>{children}</div>;
}
