<script setup lang="ts">
import { AGENTS, MODELS } from '~~/types'
</script>

<template>
  <main class="flex flex-col gap-16">
    <div class="flex flex-col gap-4">
      <h1 class="text-2xl font-bold">
        Choose an agent
      </h1>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div
          v-for="agent in AGENTS"
          :key="agent.slug"
        >
          <NuxtLink
            :to="`/${agent.slug}`"
            class="flex items-start gap-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg p-4 duration-300"
          >
            <div class="flex items-center justify-center bg-neutral-300 dark:bg-neutral-800 rounded-full p-2">
              <UIcon
                :name="agent.icon"
                size="24"
              />
            </div>
            <div class="flex flex-col">
              <h2 class="text-lg font-bold">
                {{ agent.name }}
              </h2>
              <p>
                {{ agent.description }}
              </p>
              <p>
                {{ agent.defaultModel }}
              </p>
              <p>
                {{ agent.prompt }}
              </p>
            </div>
          </NuxtLink>
        </div>
      </div>
    </div>
    <div class="flex flex-col gap-4">
      <h1 class="text-2xl font-bold">
        Available models
      </h1>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
        <div
          v-for="model in MODELS"
          :key="model.name"
        >
          <div class="flex gap-4 items-center">
            <div class="flex items-center justify-center bg-neutral-300 dark:bg-neutral-800 rounded-full p-2">
              <UIcon
                :name="model.icon"
                size="24"
              />
            </div>
            <p>
              {{ model.name }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>
