import { type FC } from 'react';

type ViewerLoadingProps = {
  progress?: number;
};

const ViewerLoading: FC<ViewerLoadingProps> = ({ progress }) => (
  <div className="w-full h-full flex flex-col items-center justify-center gap-4">
    <div
      className="size-10 rounded-full border-[3px] border-gray-200 border-t-gray-600 animate-spin"
      role="status"
      aria-label="در حال بارگذاری"
    />
    <div className="text-gray-600 text-sm">در حال بارگذاری صفحات...</div>
    {typeof progress === 'number' && progress > 0 && progress < 100 && (
      <div className="text-xs text-gray-400">{progress}٪</div>
    )}
  </div>
);

export default ViewerLoading;
