<template>
    <div class="flex flex-col items-start gap-4 p-4">
        <div class="flex w-full justify-between">
            <ILogo />
            <UButton
                color="gray"
                variant="ghost"
                leading-icon="i-heroicons-x-mark-20-solid"
                @click="handleClose"
            />
        </div>
        <div>登录以继续使用</div>
        <UButton
            block
            label="使用 GitCode 登录"
            color="gray"
            size="md"
        />
        <UButton
            block
            leading-icon="i-simple-icons-google"
            label="使用 Google 登录"
            color="gray"
            size="md"
        />
        <UButton
            block
            leading-icon="i-simple-icons-github"
            label="使用 GitHub 登录"
            color="gray"
            size="md"
        />
        <UDivider label="或" />
        <UInput
            class="w-full"
            v-model="email"
            placeholder="输入邮箱地址..."
            size="md"
        />
        <UButton
            block
            leading-icon="i-heroicons-envelope-20-solid"
            label="邮箱登录"
            size="md"
            @click="handleSign"
        />
    </div>
</template>
<script setup>
const emits = defineEmits(['close', 'signIn'])
const email = ref('')
const handleClose = () => {
    emits('close')
}
const handleSign = () => {
    emits('signIn')
}
</script>
