import InfoError, { ErrorData } from '../info/InfoError';
import { CProps } from '../props';
import Loader from '../ui/Loader';
import AnimateFade from './AnimateFade';

interface DataLoaderProps extends CProps.AnimatedDiv {
  id: string;

  isLoading?: boolean;
  error?: ErrorData;
  hasNoData?: boolean;
}

function DataLoader({
  id,
  isLoading,
  hasNoData,
  error,
  className,
  children,
  ...restProps
}: React.PropsWithChildren<DataLoaderProps>) {
  return (
    <>
      {!isLoading && !error && !hasNoData ? (
        <AnimateFade id={id} key={`${id}-data`} className={className} {...restProps}>
          {children}
        </AnimateFade>
      ) : null}
      {!isLoading && !error && hasNoData ? (
        <AnimateFade key={`${id}-no-data`} className='w-full text-center p-1' {...restProps}>
          Данные не загружены
        </AnimateFade>
      ) : null}
      {isLoading ? <Loader key={`${id}-loader`} /> : null}
      {error ? <InfoError key={`${id}-error`} error={error} /> : null}
    </>
  );
}

export default DataLoader;