<template>
	<div class="chat-header">
		<div class="chat-header__left">
			<div class="chat-title">{{ title || t('pages.chat.newConversation') }}</div>
		</div>
		<div class="chat-header__right">
			<slot name="actions" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { useI18n } from '@/composables/useI18n'
const { t } = useI18n()

defineProps<{
	title?: string
}>()
</script>

<style lang="less" scoped>
.chat-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0px 24px;
	height: 64px;
	border-bottom: 1px solid var(--border-light);
	background: var(--bg-base);
	box-sizing: border-box;

	.chat-header__left {
		min-width: 0;
		flex: 1;
	}

	.chat-header__right {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-shrink: 0;
	}

	.chat-title {
		font-size: 18px;
		font-weight: 600;
		color: var(--text-primary);
		line-height: 1.2;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
</style>
