<template>
  <Dropdown
    v-model="model"
    :options="aspectRatioOptions"
    optionLabel="label"
    optionValue="value"
    placeholder="Выберите соотношение"
    class="tw:w-full md:tw:w-96"
  >
    <template #option="slotProps">
      <div class="tw:flex tw:flex-col">
        <span class="tw:font-medium">{{ slotProps.option.label }}</span>
        <span class="tw:text-xs tw:text-gray-500 tw:whitespace-normal">{{ slotProps.option.description }}</span>
      </div>
    </template>
  </Dropdown>
</template>

<script setup>
import { Dropdown } from "primevue";

const model = defineModel();

const aspectRatioOptions = [
  { label: '1:1', value: '1:1', description: 'Универсально, аксессуары, мелкие товары, удобно для всех товаров — идеально для сетки.' },
  { label: '4:5', value: '4:5', description: 'Одежда, обувь, вертикальные товары, где нужно показать высоту (футболки, платья).' },
  { label: '3:4', value: '3:4', description: 'Одежда, обувь, вертикальные товары, где нужно показать высоту (футболки, платья).' },
  { label: '2:3', value: '2:3', description: 'Цветы, высокие предметы (бутылки, букеты, декоративные элементы).' },
];
</script>

