<template>
  <Section variant="plain" paddingY="md">
    <Card>
      <Stack gap="4">
        <Stack direction="row" align="center" justify="between">
          <Heading :level="2">Проверенные компании</Heading>
          <NuxtLink :to="localePath('/catalog/suppliers')">
            <Button variant="secondary" size="small">Смотреть все</Button>
          </NuxtLink>
        </Stack>

        <Grid :cols="1" :md="2" :lg="3" :gap="4">
          <Card
            v-for="supplier in displayedSuppliers"
            :key="supplier.uuid"
            padding="sm"
            tone="muted"
            interactive
          >
            <Stack gap="3">
              <Stack direction="row" align="start" gap="3">
                <IconCircle tone="primary">
                  {{ supplier.name?.charAt(0) }}
                </IconCircle>
                <Stack gap="1">
                  <Text size="base" weight="semibold">{{ supplier.name }}</Text>
                  <Text tone="muted">{{ supplier.country || 'Страна не указана' }}</Text>
                </Stack>
              </Stack>

              <Stack direction="row" align="center" justify="between">
                <Text tone="muted" size="sm">{{ supplier.offersCount || 0 }} предложений</Text>
                <Badge v-if="supplier.isVerified" variant="success">
                  Проверен
                </Badge>
              </Stack>
            </Stack>
          </Card>
        </Grid>

        <Stack v-if="suppliers.length === 0" align="center" gap="2">
          <Text tone="muted">Нет зарегистрированных компаний</Text>
        </Stack>
      </Stack>
    </Card>
  </Section>
</template>

<script setup lang="ts">
interface Supplier {
  uuid?: string | null
  name?: string | null
  country?: string | null
  offersCount?: number | null
  isVerified?: boolean | null
}

const props = defineProps<{
  suppliers: Supplier[]
}>()

const localePath = useLocalePath()

const displayedSuppliers = computed(() => {
  return [...props.suppliers]
    .sort((a, b) => (b.offersCount || 0) - (a.offersCount || 0))
    .slice(0, 6)
})
</script>
