<template>
	<div class="agent-container flex flex-col">
		<div class="agent-header flex align-center space-between">
			<div class="header-title-wrapper">
				<div class="agent-title">{{ props.title }}</div>
				<div class="agent-name">AI Assistant 1.0</div>
			</div>
			<SvgIcon name="equal" color="#0d0d0d" size="24" />
		</div>
		<div class="agent-body flex-1 flex flex-col">
			<List />
			<Input :is-agent-mode="true" @send="handleSendMessage" />
		</div>
	</div>
</template>

<script setup lang="ts">
	import List from './List.vue'
	import Input from '../../components/Input.vue'

	const props = withDefaults(
		defineProps<{
			title: string
		}>(),
		{
			title: 'Retro Sofa Sketch'
		}
	)

	const handleSendMessage = (message: string) => {
		console.log('Message sent:', message)
	}
</script>

<style lang="less" scoped>
	.c-svg {
		width: initial;
	}
	.agent-container {
		// width: 39%;
		width: 63.4rem;
		background-color: #fff;
		border-radius: 2rem;
		box-shadow: 0px 15px 21px 0px #0000000d;

		.agent-header {
			height: 7.4rem;
			border-bottom: 0.1rem solid #c9c9c9;
			font-family: 'GeneralMedium';
			padding: 1.4rem 3.4rem 1.4rem 3.1rem;

			.agent-title {
				font-size: 1.8rem;
				margin-bottom: 0.6rem;
			}

			.agent-name {
				font-size: 1.4rem;
			}
		}
		.agent-body {
			padding: 3.2rem;
			.assist-input-wrapper {
				width: 100%;
				height: 14.4rem;
				min-height: 14.4rem !important;
				max-height: 14.4rem !important;
			}
		}
		.input-wrapper {
			height: 14.4rem;
			padding: 0 2rem 3rem;
		}
	}
</style>
