import React from 'react';

type Props = {
  label?: string;
  detail?: string;
  compact?: boolean;
};

const LoadingSpinner = ({
  label = 'Loading your workspace',
  detail = 'Refreshing the latest operational data.',
  compact = false,
}: Props) => {
  return (
    <div
      className={`flex items-center justify-center ${compact ? 'min-h-[140px]' : 'min-h-[220px]'} px-4 py-6`}
    >
      <div className="flex max-w-md flex-col items-center text-center">
        <div className="relative h-14 w-14">
          <div className="absolute inset-0 rounded-full border-4 border-solid border-gray-200 dark:border-slate-800" />
          <div className="absolute inset-0 animate-spin rounded-full border-4 border-solid border-midnightBlueTheme-iconsColor border-t-transparent dark:border-blue-500" />
        </div>
        <p className="mt-5 text-sm font-semibold text-gray-900 dark:text-white">{label}</p>
        <p className="mt-2 text-sm leading-6 text-gray-500 dark:text-slate-400">{detail}</p>
      </div>
    </div>
  );
};

export default LoadingSpinner;
