import { FC } from 'react';
import { LoadingState } from '../../types/general';

interface ActionBarProps {
  loadingState: LoadingState;
  loadDisabled: boolean;
  GSXSync: boolean;
  load: () => void;
  unload: () => void;
}

const ActionBar: FC<ActionBarProps> = ({ loadingState, loadDisabled, GSXSync, load, unload }) => {
  return (
    <div className="relative flex w-full items-center justify-start gap-x-6">
      {loadingState === 'preview' && !GSXSync && (
        <button
          className="middle none center rounded-lg bg-green-600 px-6 py-3 font-sans text-xs font-bold uppercase text-white shadow-md shadow-green-500/20 transition-all hover:shadow-lg hover:shadow-green-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
          data-ripple-light="true"
          onClick={load}
          disabled={loadDisabled}
        >
          Load
        </button>
      )}
      {loadingState === 'loaded' && !GSXSync && (
        <button
          className="middle none center rounded-lg bg-red-600 px-6 py-3 font-sans text-xs font-bold uppercase text-white shadow-md shadow-red-500/20 transition-all hover:shadow-lg hover:shadow-red-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
          data-ripple-light="true"
          onClick={unload}
        >
          Unload
        </button>
      )}
    </div>
  );
};

export default ActionBar;