<template>
  <view :style="{
    width: '100%',
    height: '100%',
    paddingTop: props.top ? `${safeAreaInsets.top}px` : undefined,
    paddingBottom: props.bottom ? `${safeAreaInsets.bottom}px` : undefined,
    paddingLeft: props.left ? `${safeAreaInsets.left}px` : undefined,
    paddingRight: props.right ? `${safeAreaInsets.right}px` : undefined,
  }">
    <slot />
  </view>
</template>

<script setup lang="ts">
const systemInfo = uni.getSystemInfoSync();
const safeAreaInsets = systemInfo.safeAreaInsets || {
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
};

//console.log(safeAreaInsets);

export interface SafeAreaPaddingProps {
  top?: boolean;
  bottom?: boolean;
  left?: boolean;
  right?: boolean;
}

const props = withDefaults(defineProps<SafeAreaPaddingProps>(), {
  top: true,
  bottom: true,
  left: true,
  right: true,
});

defineOptions({
  options: {
    virtualHost: true,
    styleIsolation: "shared",
  }
})
</script>

<style>
</style>