<template>
  <Button
    :label
    icon="pi pi-download"
    class="p-button-sm p-button-outlined"
    :disabled="!svgUrl"
    @click="downloadPng"
  />
</template>

<script setup lang="ts">
import { downloadImage } from '@/utils/images/downloadImage'

const props = defineProps({
  svgUrl: {
    type: String,
    required: true,
  },
  filename: {
    type: String,
    required: true,
  },
  width: {
    type: Number,
    required: true,
  },
  label: {
    type: String, // Название кнопки, которое будет отображаться пользователю
    required: true,
  },
  type: {
    type: String,
    required: true,
  },
})

async function downloadPng() {
  if (!props.svgUrl) {
    console.error('SVG URL не предоставлен')
    return
  }

  try {
    await downloadImage({
      type: props.type,
      filename: `${props.filename}.png`,
      width: props.width,
      url: props.svgUrl,
    })
  } catch (err) {
    console.error('Ошибка скачивания PNG:', err)
  }
}
</script>
