<script setup lang="ts">
import CheckmarkCircle from '#adata-ui/icons/check/checkmark-circle.vue'

interface Item {
  price: number
  action: string
  id: number
  isConnected: boolean
  key: string
  code: string
}

interface Props {
  id: number
  items: Item[]
}

withDefaults(defineProps<Props>(), {})

const isOpen = defineModel<boolean>({ default: false })

const device = useAdaptive()

const { t, rt, tm } = useI18n()

</script>

<template>
  <a-modal
    v-model="isOpen"
    width="522"
    :height-modal-class="device.isSmallTablet ? 'h-[612px]' : ''"
    :is-scrollable="true"
    @close="isOpen = false"
  >
    <div class="flex flex-col gap-5 lg:w-[458px]">
      <h3 class="heading-02 text-center lg:text-left">
        {{ t('tariffs.aboutTariff') }}
      </h3>
      <div class="flex flex-col gap-2 lg:pb-0">
        <div
          class="body-400 relative grid w-full grid-cols-1 grid-rows-2 gap-[43px] px-4 py-8 lg:max-w-[458px] lg:px-[70px] lg:py-[27px]"
        >
          <img
            class="absolute size-full"
            src="/tariff/subtract.png"
            alt="background"
          >
          <div class="flex justify-around gap-8 lg:justify-between">
            <div>
              <div>
                {{ t('reuse.subscribe') }}
              </div>
              <h4 class="md:heading-02 heading-03">
                {{ t(`tariffs.modals.${id}.name`) }}
              </h4>
            </div>
            <div>
              <div>
                {{ t('reuse.startingFrom') }}
              </div>
              <div class="md:heading-02 heading-03">
                {{ t(`tariffs.modals.${id}.price`) }} <span
                  class="body-400"
                >{{ t(`tariffs.modals.${id}.period`) }}</span>
              </div>
            </div>
          </div>
          <p class="px-1 text-center lg:px-0">
            {{ t(`tariffs.modals.${id}.forWho`) }}
          </p>
        </div>
        <div class="flex flex-wrap gap-1 sm:gap-2">
          <div
            v-for="(item, index) in tm(`tariffs.modals.${id}.professions`)"
            class=" h-7 rounded-full bg-blue-700 px-[10px] py-[5px] text-xs leading-[16px] text-white dark:bg-blue-500  dark:text-gray-900 "
          >
            {{ rt(item) }}
          </div>
        </div>
        <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
          <div
            v-for="(item, index) in tm(`tariffs.modals.${id}.functions`)"
            class="flex items-center gap-[1.5px]"
          >
            <checkmark-circle class="shrink-0 text-green-500 dark:text-green-400" />
            <p class="text-xs">
              {{ rt(item) }}
            </p>
          </div>
        </div>
      </div>
      <div
        class="flex gap-4"
        :class="device.isMobile ? 'bg-white dark:bg-gray-900 m-0 p-4 sticky bottom-0 left-0 w-full' : ''"
      >
        <a-button
          view="outline"
          variant="primary"
          block
          @click="isOpen = false"
        >
          {{ t('reuse.close') }}
        </a-button>
        <slot
          name="button"
          size="lg"
          :item="items[id - 1]"
        />
      </div>
    </div>
  </a-modal>
</template>
