import React, { memo } from "react";
const ICONS = {
search: (
),
heart: (
),
history: (
),
settings: (
),
image: (
),
};
const VARIANTS = {
noResults: {
icon: "search",
title: "No images found",
description: (query) =>
query ? `No images found for "${query}". Try different keywords or clear filters.` : "Try different keywords or clear filters.",
actionLabel: "Clear filters",
},
noFavorites: {
icon: "heart",
title: "No favorites yet",
description: () => "Images you favorite will appear here.",
actionLabel: null,
},
noHistory: {
icon: "history",
title: "No search history",
description: () => "Your recent searches will appear here.",
actionLabel: null,
},
providerDisabled: {
icon: "settings",
title: "Provider disabled",
description: () => "Enable this source in Dashboard → Image sources.",
actionLabel: "Open Dashboard",
actionHref: () => (typeof AI_IMAGE_AdminConfig !== "undefined" ? AI_IMAGE_AdminConfig.settings_url : "#"),
},
};
function EmptyState({
variant = "noResults",
query = "",
onAction,
className = "",
}) {
const config = VARIANTS[variant] || VARIANTS.noResults;
const iconEl = ICONS[config.icon] || ICONS.search;
const description =
typeof config.description === "function"
? config.description(query)
: config.description;
return (
{iconEl}
{config.title}
{description}
{config.actionLabel && (
)}
);
}
export default memo(EmptyState);