import type { ReactNode } from 'react';

interface EmptyStateProps {
	icon: ReactNode;
	title: string;
	children?: ReactNode;
	action?: ReactNode;
}

/**
 * A warm empty state (`.empty`) — never a cold "0 results".
 * @param root0
 * @param root0.icon
 * @param root0.title
 * @param root0.children
 * @param root0.action
 */
export const EmptyState = ( {
	icon,
	title,
	children,
	action,
}: EmptyStateProps ) => (
	<div className="empty">
		<div className="e-ic">{ icon }</div>
		<h4>{ title }</h4>
		{ children ? <p>{ children }</p> : null }
		{ action ? (
			<div style={ { marginTop: 'var(--s-4)' } }>{ action }</div>
		) : null }
	</div>
);
