import { IconCheck, IconX } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import Button from '@material-hu/components/design-system/Buttons/Button';

type EditActionsProps = {
  onCancel: () => void;
  onSave: () => void;
};

const EditActions = ({ onCancel, onSave }: EditActionsProps) => {
  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 1,
      }}
    >
      <Button
        variant="secondary"
        sx={{
          minWidth: 0,
          px: 0.5,
          height: 24,
        }}
        onMouseDown={e => {
          e.preventDefault();
          onCancel();
        }}
      >
        <IconX
          size={16}
          style={{
            margin: 0,
            padding: 0,
          }}
        />
      </Button>
      <Button
        variant="primary"
        sx={{
          minWidth: 0,
          px: 0.5,
          height: 24,
        }}
        onClick={onSave}
      >
        <IconCheck size={16} />
      </Button>
    </Stack>
  );
};

export default EditActions;