webapp/src/components/BottomActionBar.tsx

import React from 'react';
import { Appbar, useTheme } from 'react-native-paper';
import { StyleSheet } from 'react-native';

interface BottomActionBarProps {
  onRun: () => void;
  onSave: () => void;
  onUndo: () => void;
  onRestore: () => void;
  onBack: () => void;
  isSaveDisabled?: boolean;
}

const BottomActionBar: React.FC<BottomActionBarProps> = ({
  onRun,
  onSave,
  onUndo,
  onRestore,
  onBack,
  isSaveDisabled = true,
}) => {
  const theme = useTheme();

  return (
    <Appbar style={[styles.bottom, { backgroundColor: theme.colors.elevation.level2 }]}>
      <Appbar.Action icon="arrow-left" onPress={onBack} />
      <Appbar.Action icon="play" onPress={onRun} />
      <Appbar.Action icon="content-save" onPress={onSave} disabled={isSaveDisabled} />
      <Appbar.Action icon="undo" onPress={onUndo} />
      <Appbar.Action icon="restore" onPress={onRestore} />
    </Appbar>
  );
};

const styles = StyleSheet.create({
  bottom: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'space-around',
  },
});

export default BottomActionBar;