<template>
	<div class="agent-wrapper flex space-between">
		<Agent :title="agentTitle" />
		<div class="preview-wrapper">
			<Preview :type="previewType" />
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import Agent from './components/Agent.vue'
	import Preview from './components/Preview.vue'

	const agentTitle = ref('Retro Sofa Sketch')
	const previewType = ref<'sketch' | 'report'>('sketch')
</script>

<style lang="less" scoped>
	.agent-wrapper {
		width: 100%;
		height: 100%;
		border-top: 0.1rem solid #c9c9c9;
		padding: 8rem 2.3rem 6rem 2.8rem;

		.c-svg {
			width: initial;
		}

		.preview-wrapper {
			width: 91.2rem;
		}
	}
</style>
