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;