<template>
  <UPopover
    :mode="isMobile ? 'click' : 'hover'"
    :ui="{ content: '--reka-popper-transform-origin: 50% -20px;' }"
  >
    <UButton
      icon="i-mdi-human-handsdown"
      label="фотомодель"
      class="model-btn"
    />

    <template #content>
      <div class="model-info">
        <div
          v-for="parameter in photoModel"
          :key="parameter?.split(': ')[0]"
        >
          {{ parameter?.split(': ')[0] }} <strong>{{ parameter?.split(': ')[1] }}</strong>
        </div>
      </div>
    </template>
  </UPopover>
</template>

<script setup lang="ts">
import { useMediaQuery } from '@vueuse/core'

const { photoModel } = useProduct()
const isMobile = useMediaQuery('(max-width: 1280px)')
</script>

 <style scoped lang="scss">
 .model-btn {
  display: inline-flex !important;
  align-self: flex-start;
}

.model-info {
  width: 140px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 15px;
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;

  & > * {
    display: flex;
    justify-content: space-between;
  }
}

.model-info strong {
  font-weight: 600;
}
</style>
