<template>
	<div class="flex w-full h-full overflow-hidden">
		<div class="flex-1 flex flex-col">
			<div
				class="h-32px shrink-0 px-12px flex items-center justify-between border border-solid border-gray-200"
				@click="onClick"
			>
				<span class="text-12px">日志</span>
				<IconButton :icon="open ? 'lucide:chevron-down' : 'lucide:chevron-up'" link></IconButton>
			</div>
			<div class="flex-1 text-12px p-12px">日志内容...</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { IconButton } from '@repo/ui'

const emit = defineEmits<{
	toggle: [open: boolean]
}>()

const open = ref(false)

const onClick = () => {
	open.value = !open.value
	emit('toggle', open.value)
}
</script>
