import clsx from 'clsx';
import { observer } from 'mobx-react-lite';
import React from 'react';

import { useStores } from '@/app/(root)/AppProviders';

export type MaintenanceBarProps = {
  isMaintenance?: boolean;
  isScheduledMaintenance?: boolean;
  message?: string;
};

export const MaintenanceBar: React.FC<MaintenanceBarProps> = observer(
  (props) => {
    const { session: sessionStore } = useStores();
    const {
      isMaintenance: sessionIsMaintenance,
      isScheduledMaintenance: sessionIsScheduledMaintenance,
      message: sessionMessage,
    } = sessionStore;

    const {
      isMaintenance = sessionIsMaintenance,
      isScheduledMaintenance = sessionIsScheduledMaintenance,
      message = sessionMessage,
    } = props;

    if (!isMaintenance && !isScheduledMaintenance) {
      return null;
    }

    return (
      <div
        className={clsx('flex w-full justify-center py-3', {
          'bg-pumpkin-300 text-white': isMaintenance,
          'bg-dodger-blue-300 text-white': !isMaintenance,
        })}
      >
        <p>{message}</p>
      </div>
    );
  }
);

export default MaintenanceBar;