import { LoadingOutline } from '@/icons/loading-outline';
import { Dashicon } from '@wordpress/components';
import clsx from 'clsx';
import { ReactNode } from 'react';

interface LoadingProps {
  loading?: boolean;
  children?: ReactNode;
  offsetTop?: string;
}

const PREFIX = 'lks-loading';

export const Loading = ({
  loading = true,
  offsetTop = '45%',
  children,
}: LoadingProps) => {
  return (
    <div
      className={clsx(PREFIX, {
        [`${PREFIX}--loading`]: loading,
      })}
    >
      {loading && (
        <div className={`${PREFIX}__mask`}>
          <LoadingOutline
            className={`${PREFIX}__mask__icon`}
            color="rgba(0, 60, 212, 1)"
            size={24}
            style={{
              top: offsetTop,
            }}
          />
        </div>
      )}
      {children}
    </div>
  );
};