<script setup lang="ts">
import type { Locale, TranslationKey } from '../../i18n/translations'

import { cn } from '@comfyorg/tailwind-utils'

import { getRoutes } from '../../config/routes'
import { t } from '../../i18n/translations'
import ProductCard from './ProductCard.vue'
import SectionLabel from './SectionLabel.vue'

type Product = 'local' | 'cloud' | 'api' | 'enterprise'

const {
  locale = 'en',
  excludeProduct,
  labelKey = ''
} = defineProps<{
  locale?: Locale
  excludeProduct?: Product
  labelKey?: TranslationKey
}>()

const routes = getRoutes(locale)

function cardDef(product: Product, href: string, bg: string) {
  return {
    product,
    title: t(`products.${product}.title`, locale),
    description: t(`products.${product}.description`, locale),
    cta: t(`products.${product}.cta`, locale),
    href,
    bg
  }
}

const allCards: (ReturnType<typeof cardDef> & { product: Product })[] = [
  cardDef('local', routes.download, 'bg-primary-warm-gray'),
  cardDef('cloud', routes.cloud, 'bg-secondary-mauve'),
  cardDef('api', routes.api, 'bg-primary-comfy-plum'),
  cardDef('enterprise', routes.cloudEnterprise, 'bg-secondary-cool-gray')
]

const cards = excludeProduct
  ? allCards.filter((c) => c.product !== excludeProduct)
  : allCards
</script>

<template>
  <section
    class="bg-primary-comfy-ink max-w-9xl mx-auto px-0 py-20 lg:px-20 lg:py-24"
  >
    <!-- Header -->
    <div class="flex flex-col items-center px-4 text-center">
      <SectionLabel v-if="labelKey">
        {{ t(labelKey, locale) }}
      </SectionLabel>
      <h2
        class="text-primary-comfy-canvas mt-4 text-4xl font-light whitespace-pre-line lg:text-5xl"
      >
        {{ t('products.heading', locale) }}
      </h2>
      <p class="text-primary-comfy-canvas/70 mt-4 text-sm">
        {{ t('products.subheading', locale) }}
      </p>
    </div>

    <!-- Cards -->
    <div
      :class="
        cn(
          'bg-transparency-white-t4 rounded-5xl mt-16 grid grid-cols-1 gap-4 p-4 lg:p-2',
          cards.length === 4 ? 'lg:grid-cols-4' : 'lg:grid-cols-3'
        )
      "
    >
      <ProductCard v-for="card in cards" :key="card.product" v-bind="card" />
    </div>
  </section>
</template>
