<template>
	<div class="d-flex justify-center align-center" 
		:class="directionBtn === 'vertically'?'flex-row':'flex-column'" 
		style="gap: 12px">
		<a-button   @click="directionBtn === 'vertically' ? btnActionsFnc('removeRightToLeft') : btnActionsFnc('addLeftToRight')" type="primary" ghost :icon="directionBtn === 'vertically'? icons.remove :icons.add " class="custom-action-btn">
		</a-button>
		<a-button @click="directionBtn === 'vertically' ? btnActionsFnc('removeRightToLeft') :btnActionsFnc('removeRightToLeft')" type="primary" ghost :icon="directionBtn === 'vertically'? icons.add :icons.remove" class="custom-action-btn">
		</a-button>
	</div>
</template>
<script>
export default {
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		leftGridName: {
			type: String,
			require: true,
		},
		rightGridName: {
			type: String,
			required: true,
		},
		btnActionsFnc: {
			type: Function,
			required: true,
		},
		directionBtn: {
			type: String,
			default: "horizontally" //horizontally, vertically.
		}
	},
	computed: {
		icons() {
			return this.directionBtn === "vertically"
				? { remove: "up", add: "down" }
				: { remove: "left", add: "right" };
			},
	},
	data() {
		return {};
	},
};
</script>
