'use client';

import { WebUiLogo } from './WebUiLogo';
import { Wordmark } from './Wordmark';
type Props = {
	visible: boolean;
	error?: string;
	onRetry?: Function;
};

export default function Loader( { visible, error, onRetry }: Props ) {
	const dataProps = false === visible ? { 'data-closed': true } : {};
	return (
		// <PopOver isVisible={visible} close={() => false}>
		<div
			{ ...dataProps }
			className="container min-w-[420px] relative transform overflow-hidden rounded-lg dark:bg-zinc-950 bg-sky-800 px-4 pb-4 pt-5 text-left shadow-black/70 shadow-2xl transition-all data-[closed]:translate-y-4 data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in sm:my-8 max-w-xl py-24 sm:px-6 sm:py-10 lg:px-8 data-[closed]:sm:translate-y-0 data-[closed]:sm:scale-95"
		>
			<WebUiLogo
				className="pointer-events-none absolute right-0 top-0 -z-10 h-[15rem] w-[15rem] -translate-y-[3.8rem] translate-x-[1rem] opacity-50"
				isLoading={ true }
			/>
			<svg
				viewBox="0 0 512 512"
				aria-hidden="true"
				className="absolute left-0 top-0 -z-10 h-[80rem] w-[80rem] -translate-y-4/4 -translate-x-1/4 [mask-image:radial-gradient(closest-side,white,transparent)]"
			>
				<circle
					r={ 256 }
					cx={ 256 }
					cy={ 256 }
					fill="url(#759c1415-0410-454c-8f7c-9a820de03641)"
					fillOpacity="0.9"
				/>
				<defs>
					<radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
						<stop stopColor="#67e8f9" />
						<stop offset={ 1 } stopColor="#67e8f9" />
					</radialGradient>
				</defs>
			</svg>
			<Wordmark />
			{ error && error !== '' && (
				<>
					<p className="text-xl text-white font-bold">{ error }</p>
					{ error && error !== '' && onRetry && (
						<button
							type="button"
							onClick={ () => {
								onRetry();
							} }
							className="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
						>
							<span className="sr-only">Retry</span>
						</button>
					) }
				</>
			) }
		</div>
		// </PopOver>
	);
}