import React, { type ComponentPropsWithRef, type FC, type ReactNode } from 'react';
import classNames from 'clsx';
import type { IntentType } from '../const';

export interface NonIdealStateProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
	title?: ReactNode;
	icon?: ReactNode;
	description?: ReactNode;
	action?: ReactNode;
	intent?: IntentType;
}

export const NonIdealState: FC<NonIdealStateProps> = ({
	icon,
	title,
	description,
	action,
	children,
	className,
	intent,
	...props
}) => {
	return (
		<div
			className={classNames('NonIdealState flex h-full w-full flex-col items-center justify-center', className)}
			{...props}
		>
			<div className={classNames('text-lg opacity-75 [&>svg]:w-[4rem]', intent && `text-${intent}`)}>{icon}</div>
			{title && <h4 className={'pb-2 text-2xl font-bold opacity-80'}>{title}</h4>}
			{description && <div className={'pb-4 opacity-75'}>{description}</div>}
			{action}
			{children}
		</div>
	);
};