<template>
  <nut-action-sheet v-model:visible="innerShow" class="share-action">
    <div class="flex flex-col relative pt-[20rpx] px-[20rpx] pb-[42rpx] bg-gradient-to-b from-[#28BEBB] to-[#28BEBB00] rounded-[40rpx_40rpx_0_0]">
      <img src="/images/product/share-title.png" alt="share-title" class="w-[276rpx] h-[90rpx] absolute top-[-10%] left-[36rpx]" />
      <div class="rounded-full bg-white w-[60rpx] h-[60rpx] flex items-center justify-center self-end" @click="handleClose">
        <X />
      </div>
      <div class="m-[34rpx] flex items-center">
        <img src="/images/product/share-wx.png" alt="share-qrcode" class="w-[320rpx] h-[284rpx]" />
        <img src="/images/product/share-friend.png" alt="share-friend" class="w-[320rpx] h-[284rpx]" />
      </div>
    </div>
  </nut-action-sheet>
</template>

<script lang="ts" setup>
  import { X } from "lucide-vue-next";

  const props = defineProps({
    show: {
      type: Boolean,
      default: false,
    },
  });

  const emits = defineEmits(["update:show"]);

  const innerShow = computed({
    get() {
      return props.show;
    },
    set(value) {
      emits("update:show", value);
    },
  });

  const handleClose = () => {
    emits("update:show", false);
  };
</script>
