<template>
  <template
    v-for="content in table"
    :key="content.title"
  >
    <div
      :class="[
        'p-5 first:pt-12 pt-32 pb-12 border-x border-y border-neutral-900',
        mobileTable ? 'col-span-2' : 'col-span-5'
      ]"
    >
      <div class="text-xs text-neutral-300 uppercase tracking-wide font-proto-mono">
        {{ content.overline }}
      </div>
      <h3 class="display-2 font-medium font-sora mt-3">{{ content.title }}</h3>
      <p class="text-neutral-300 font-sora mt-1">{{ content.description }}</p>
    </div>

    <template
      v-for="(feature, featureIndex) in content.features"
      :key="feature.name"
    >
      <div
        :class="[
          'border-l border-r flex items-center gap-2 border-neutral-900',
          featureIndex === content.features.length - 1 ? 'border-b' : '',
          feature.nested ? 'p-5 pl-7' : 'p-5 border-t border-neutral-900'
        ]"
      >
        <span
          :class="[
            'font-medium font-sora',
            feature.nested ? 'text-neutral-300 text-sm font-normal' : 'text-white'
          ]"
          >{{ feature.name }}</span
        >
        <span
          v-if="feature.info"
          v-tooltip.top="feature.info"
          class="pi pi-info-circle text-neutral-400 text-xs cursor-help hover:text-neutral-300 transition-colors"
        ></span>
      </div>

      <div
        v-for="(value, planIndex) in feature.values"
        :key="planIndex"
        :class="[
          'p-5 text-left flex items-center gap-2 border-r border-neutral-900',
          !feature.nested && 'border-t border-neutral-900',
          featureIndex === content.features.length - 1 ? 'border-b' : '',
          planIndex === feature.values.length - 1 ? 'border-r' : ''
        ]"
      >
        <span
          v-if="value === true"
          class="pi pi-check text-orange-500 text-sm"
        ></span>
        <span
          v-else-if="value === false"
          class="text-neutral-500 font-sora"
          >—</span
        >
        <span
          v-else-if="feature.nested"
          class="text-neutral-300 font-sora text-sm"
          >{{ value }}</span
        >
        <span
          v-else
          class="text-white font-sora text-sm"
          >{{ value }}</span
        >
      </div>
    </template>
  </template>
</template>

<script setup>
  defineProps({
    mobileTable: {
      type: Boolean,
      default: false
    },
    table: {
      type: Array,
      default: () => [
        {
          overline: 'AZION WEB PLATFORM',
          title: 'Platform',
          description: 'Ultra-fast, secure by default global application delivery',
          features: [
            {
              name: 'Workspaces',
              nested: true,
              info: 'Alguma informacao relevante para colocar no tooltip',
              values: ['1 Workspace', '1 Workspace', '1 Workspace', 'Custom']
            },
            {
              name: 'Workloads',
              nested: true,
              values: ['10 Workloads', '100 Workloads', '200 Workloads', 'Custom']
            },
            {
              name: 'Users',
              values: ['50 seats included', '50 seats included', '50 seats included', 'Custom']
            },
            {
              name: 'Custom Domains',
              values: ['50 per workload', '50 per workload', '50 per workload', '50 per workload']
            },
            {
              name: 'Dev Tools (CLI, API, GraphQL API, Terraform)',
              values: [true, true, true, true]
            },
            {
              name: 'SAML Single Sign-on (SSO)',
              values: [false, false, false, true]
            },
            {
              name: 'Directory Sync (SCIM)',
              values: ['1 Workspace', '1 Workspace', '1 Workspace', '1 Workspace']
            },
            {
              name: 'Custom Network Map',
              values: ['1 Workspace', '1 Workspace', '1 Workspace', '1 Workspace']
            },
            {
              name: 'Mutual TLS',
              values: ['1 Workspace', '1 Workspace', '1 Workspace', '1 Workspace']
            }
          ]
        },
        {
          overline: 'AZION WEB PLATFORM',
          title: 'Platform',
          description: 'Ultra-fast, secure by default global application delivery',
          features: [
            {
              name: 'Workspaces',
              nested: true,
              values: ['1 Workspace', '1 Workspace', '1 Workspace', 'Custom']
            },
            {
              name: 'Workloads',
              nested: true,
              values: ['10 Workloads', '100 Workloads', '200 Workloads', 'Custom']
            },
            {
              name: 'Users',
              values: ['50 seats included', '50 seats included', '50 seats included', 'Custom']
            },
            {
              name: 'Custom Domains',
              values: ['50 per workload', '50 per workload', '50 per workload', '50 per workload']
            },
            {
              name: 'Dev Tools (CLI, API, GraphQL API, Terraform)',
              values: [true, true, true, true]
            },
            {
              name: 'SAML Single Sign-on (SSO)',
              values: [false, false, false, true]
            },
            {
              name: 'Directory Sync (SCIM)',
              values: ['1 Workspace', '1 Workspace', '1 Workspace', '1 Workspace']
            },
            {
              name: 'Custom Network Map',
              values: ['1 Workspace', '1 Workspace', '1 Workspace', '1 Workspace']
            },
            {
              name: 'Mutual TLS',
              values: ['1 Workspace', '1 Workspace', '1 Workspace', '1 Workspace']
            }
          ]
        }
      ]
    }
  })
</script>
