import React, { type ComponentPropsWithoutRef, type FC, type ReactNode } from 'react';
import { useDebounce } from '@wener/reaction';
import { cn } from '../../utils/cn';
import { ErrorPlaceholder } from './ErrorPlaceholder';

export const NotReadyPlaceholder: FC<
	{
		loading?: boolean;
		error?: any;
		content?: ReactNode;
		refetch?: () => void;
		empty?: boolean | number;
	} & Omit<ComponentPropsWithoutRef<'div'>, 'content'>
> = ({ loading, refetch, empty, children, error, className, content = children, ...props }) => {
	// 200-500ms
	const _loading = useDebounce(loading, 250);
	if (_loading) {
		return (
			<div
				data-state={'loading'}
				className={cn('loading loading-spinner h-4 w-4 opacity-75', className)}
				{...props}
			></div>
		);
	}
	if (error) {
		return <ErrorPlaceholder data-state={'error'} error={error} className={className} {...props} />;
	}
	if (empty !== undefined && !empty) {
		return (
			<div data-state={'empty'} className={cn(className)} {...props}>
				没有数据
			</div>
		);
	}
	return content;
};