components/UpdateRefreshDataMode.tsx

import React, { Ref } from 'react';
import type { Mode } from '../types';
import { FaRedo, FaSave, FaSignInAlt, FaSignOutAlt } from 'react-icons/fa';

interface UpdateRefreshDataModeProps {
  mode: Mode;
  saveRef: Ref<HTMLButtonElement>;
  onFetch: () => void;
  onSave: () => void;
  onLogin: () => void;
  onLogout: () => void;
  isMobile: boolean
}

const UpdateRefreshDataMode: React.FC<UpdateRefreshDataModeProps> = ({ mode, saveRef, onFetch, onSave, onLogin, onLogout, isMobile }) => {
    return (
        <>

            <div className={`flex justify-between items-center gap-10 ${isMobile ? "flex-col" : ""}`}>

                <button

                    onClick={onFetch}

                    className={`flex items-center justify-center px-6 py-3 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500 transition-transform transform hover:scale-105`}

                >

                    <FaRedo className="h-4 w-4 mr-2" />

                    Refresh

                </button>

            

                {mode === "controller" &&

                    <button

                        ref={saveRef}

                        onClick={onSave}

                        className={`flex items-center justify-center px-6 py-3 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500 transition-transform transform hover:scale-105`}

                    >

                        <FaSave className="h-4 w-4 mr-2" />

                        Save

                    </button>

                }



                <button

                    onClick={mode === "preview" ? onLogin : onLogout}

                    className={`flex items-center justify-center px-6 py-3 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500 transition-transform transform hover:scale-105`}

                >

                    {mode === "preview" ? (

                        <>

                            <FaSignInAlt className="h-4 w-4 mr-2" />

                            Login

                        </>

                    ) : (

                        <>

                            <FaSignOutAlt className="h-4 w-4 mr-2" />

                            Logout

                        </>

                    )}

                </button>

            </div>

        </>
    )
}

export default UpdateRefreshDataMode;