<style scoped lang="scss">
.report-card {
	cursor: pointer;
	transition: background-color 0.2s;
}

.report-card:hover {
	background-color: $secondary;
}

.report-card.active {
	background-color: $primary;
	color: white;
}
.reports-list {
	overflow-y: auto;
	max-height: 100vh;
}
</style>

<template>
	<!-- First row: icon, type badge, and time -->
	<div
		class="align-items-center justify-content-between list-group-item p-3 report-card"
		:class="{ active: isSelected }"
	>
		<div class="row">
			<div class="d-flex align-items-center">
				<div class="col">
					<i
						class="bi fs-4 me-2"
						:class="{ 'bi-envelope': contact.emails.length != 0 }"
					/>
					<i
						class="bi fs-4 me-2"
						:class="{ 'bi-phone': contact.phones.length != 0 }"
					/>
				</div>
				<div class="col-6 text-end">
					<small>{{ contact.name }}</small>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import TimeRelative from "@/components/TimeRelative.vue";
import Tooltip from "@/components/Tooltip.vue";
import { formatAddress, formatDate } from "@/format";
import { Contact } from "@/type/api";
interface Props {
	contact: Contact;
	isSelected: boolean;
}
const props = defineProps<Props>();
</script>
