'use client';
import { FormContext } from './context/form-context';
import { CheckCircleIcon } from '@heroicons/react/24/solid';
import type { PropsWithChildren } from 'react';
import { useContext } from 'react';
import { Background, LoadingSpinner } from 'ui';

function OverlayWrapper({ children }: PropsWithChildren) {
  return (
    <Background className="lg:w-standard absolute grid h-full w-full items-center justify-center border-none bg-opacity-80 backdrop-blur-sm">
      <div className="flex flex-row items-center gap-2">{children} </div>
    </Background>
  );
}
export function Overlay() {
  const { formStatus } = useContext(FormContext);

  if (formStatus === 'pending')
    return (
      <OverlayWrapper>
        {LoadingSpinner} <p className="font-medium">Загрузка...</p>
      </OverlayWrapper>
    );
  if (formStatus === 'success')
    return (
      <OverlayWrapper>
        <CheckCircleIcon className="h-10 w-10 fill-green-500" title="OK" />{' '}
        <p className="font-medium">Данные сохранены</p>
      </OverlayWrapper>
    );

  return false;
}