<script lang="ts" setup>
interface ComparisonRow {
  feature: string
  ours: string
  theirs: string
  oursIsWin?: boolean
}

interface Props {
  rows: ComparisonRow[]
  ourLabel?: string
  theirLabel?: string
}

withDefaults(defineProps<Props>(), {
  ourLabel: 'EZSCALE',
  theirLabel: 'Typical big-cloud VPS',
})
</script>

<template>
  <div class="comparison">
    <div class="comparison__head" role="rowheader">
      <div class="comparison__cell comparison__cell--feature">What you get</div>
      <div class="comparison__cell comparison__cell--ours">{{ ourLabel }}</div>
      <div class="comparison__cell comparison__cell--theirs">{{ theirLabel }}</div>
    </div>
    <div
      v-for="(row, idx) in rows"
      :key="idx"
      class="comparison__row"
    >
      <div class="comparison__cell comparison__cell--feature">{{ row.feature }}</div>
      <div class="comparison__cell comparison__cell--ours">
        <VIcon icon="tabler-check" size="18" color="success" class="me-2" />
        <span>{{ row.ours }}</span>
      </div>
      <div class="comparison__cell comparison__cell--theirs">
        <VIcon icon="tabler-x" size="18" color="error" class="me-2" />
        <span>{{ row.theirs }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.comparison {
  max-width: 980px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(var(--v-theme-surface), 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
}

.comparison__head {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 0;
  background: rgba(var(--v-theme-on-surface), 0.04);
  border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.08);

  .comparison__cell {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--v-theme-on-surface), 0.6);
  }

  .comparison__cell--ours {
    color: rgb(var(--v-theme-primary));
  }
}

.comparison__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.05);

  &:last-child {
    border-bottom: none;
  }
}

.comparison__cell {
  display: flex;
  align-items: center;
  padding: 16px 22px;
  font-size: 14px;
  color: rgba(var(--v-theme-on-surface), 0.85);

  @media (max-width: 600px) {
    padding: 12px 14px;
    font-size: 13px;
  }
}

.comparison__cell--feature {
  font-weight: 600;
  color: rgba(var(--v-theme-on-surface), 0.95);
  border-right: 1px solid rgba(var(--v-theme-on-surface), 0.05);
}

.comparison__cell--ours {
  background: rgba(var(--v-theme-primary), 0.05);
  border-right: 1px solid rgba(var(--v-theme-on-surface), 0.05);
}

.comparison__cell--theirs {
  color: rgba(var(--v-theme-on-surface), 0.6);
}
</style>
