import { Button } from "@cap/ui";
import type { ReactNode } from "react";

interface EmptyStateProps {
	title: string;
	description: string;
	actionLabel?: string;
	onAction?: () => void;
	icon?: ReactNode;
}

export const EmptyState = ({
	title,
	description,
	actionLabel,
	onAction,
	icon,
}: EmptyStateProps) => {
	return (
		<div className="flex flex-col items-center justify-center py-16 text-center">
			{icon && <div className="mb-4">{icon}</div>}
			<h3 className="text-xl font-semibold text-gray-12">{title}</h3>
			<p className="mt-2 text-gray-10 max-w-md">{description}</p>
			{actionLabel && onAction && (
				<Button className="mt-6" onClick={onAction}>
					{actionLabel}
				</Button>
			)}
		</div>
	);
};
