<script setup lang="ts">
defineProps<{
  logoUrl?: string
  name?: string
  description?: string
  title?: string
}>()
</script>

<template>
  <section class="babylai:border-b babylai:border-black-white-200">
    <div class="babylai:flex babylai:items-center babylai:gap-3 babylai:p-6 babylai:mb-6 babylai:rounded-3xl babylai:border babylai:border-black-white-200 babylai:bg-card">
      <div v-if="logoUrl" class="babylai:shrink-0 babylai:w-12 babylai:h-12 babylai:rounded-md babylai:overflow-hidden">
        <img :src="logoUrl" :alt="title ? `${title} logo` : 'Company logo'" class="babylai:w-full babylai:h-full babylai:object-contain" />
      </div>
      <div class="babylai:flex-1 babylai:min-w-0 babylai:text-start">
        <h3 class="babylai:text-lg babylai:font-semibold babylai:mb-1 babylai:text-card-foreground" dir="auto">{{ name }}</h3>
        <p class="babylai:text-sm babylai:text-muted-foreground" dir="auto">{{ description }}</p>
      </div>
    </div>
  </section>
</template>
