import type { ReactNode } from 'react';

// Import images
import noABImage from './images/no-ab.png';
import noAnalyticsImage from './images/no-analytics.png';
import noEngagedImage from './images/no-engaged.png';
import noPersonalizationImage from './images/no-personalization.png';
import noPopularImage from './images/no-popular.png';
import noRateImage from './images/no-rate.png';
import noSessionsImage from './images/no-sessions.png';
import noUsersImage from './images/no-users.png';

// Image mapping
const IMAGE_MAP = {
	ab: noABImage,
	analytics: noAnalyticsImage,
	engaged: noEngagedImage,
	personalization: noPersonalizationImage,
	popular: noPopularImage,
	rate: noRateImage,
	sessions: noSessionsImage,
	users: noUsersImage,
} as const;

export type PlaceholderImageType = keyof typeof IMAGE_MAP;

interface NoDataPlaceholderProps {
	/** Type of placeholder image to display */
	type: PlaceholderImageType;
	/** Optional content to display below the image (can include text, links, etc.) */
	children?: ReactNode;
}

/**
 * NoDataPlaceholder component displays a placeholder image with optional content when no data is available
 *
 * @param root0
 * @param root0.type
 * @param root0.children
 * @example
 * ```tsx
 * <NoDataPlaceholder type="analytics">
 *   <p>No analytics data available for this period.</p>
 * </NoDataPlaceholder>
 *
 * <NoDataPlaceholder type="users">
 *   <p>No users found. <a href="/settings">Configure tracking</a> to get started.</p>
 * </NoDataPlaceholder>
 * ```
 */
export default function NoDataPlaceholder( {
	type,
	children,
}: NoDataPlaceholderProps ) {
	const imageSrc = IMAGE_MAP[ type ];

	return (
		<div className="gs-no-data-placeholder">
			<img
				width={ 100 }
				height={ 100 }
				src={ imageSrc }
				alt=""
				className="gs-no-data-placeholder__image"
			/>
			{ children && (
				<div className="gs-no-data-placeholder__content">
					{ children }
				</div>
			) }
		</div>
	);
}