<template>
	<div class="search-results search-results--users">
		<div class="simple-subtitle">
			People
			<span class="toolbar__search-count">
				{{ results.length }}
			</span>
		</div>
		<w-divider />
		<div class="search-results__user-list">
			<router-link
				v-for="(profile, index) in results"
				:key="index"
				:to="profile.profileUrl"
			>
				<VindiProfile
					:profile="profile"
				/>
			</router-link>
		</div>
	</div>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';

export default Vue.extend({
	props: {
		results: Object as PropType<any[]>
	}
});
</script>

<style lang="scss">
.search-results__user-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
</style>