import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Button, useTheme } from '@rneui/themed';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

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 (
    <View style={[styles.bottom, { backgroundColor: theme.colors.background }]}>
      <Button type="clear" onPress={onBack} icon={<Icon name="arrow-left" size={24} color={theme.colors.primary} />} />
      <Button type="clear" onPress={onRun} icon={<Icon name="play" size={24} color={theme.colors.primary} />} />
      <Button type="clear" onPress={onSave} disabled={isSaveDisabled} icon={<Icon name="content-save" size={24} color={isSaveDisabled ? theme.colors.disabled : theme.colors.primary} />} />
      <Button type="clear" onPress={onUndo} icon={<Icon name="undo" size={24} color={theme.colors.primary} />} />
      <Button type="clear" onPress={onRestore} icon={<Icon name="restore" size={24} color={theme.colors.primary} />} />
    </View>
  );
};

const styles = StyleSheet.create({
  bottom: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    flexDirection: 'row',
    justifyContent: 'space-around',
    paddingVertical: 8,
    borderTopWidth: 1,
    borderTopColor: '#e0e0e0',
  },
});

export default BottomActionBar;