<template>
    <template v-if="model">
        <div class="flex flex-1 gap-12 px-2 py-4 justify-center items-center">
            <TextInput label="Nom" v-model="model.character.name" class="flex-none"/>
            <Switch label="Privé ?" :default-value="model.character.visibility === 'private'" @update:model-value="(e) => model!.character.visibility = e ? 'private' : 'public'" />
            <Button @click="emit('next')">Suivant</Button>
        </div>
        <div class="flex flex-1 gap-4 p-2 overflow-x-auto justify-center">
            <div v-for="(people, i) of config.peoples" @click="model.character.people = i" class="flex flex-col flex-nowrap gap-2 p-2 border border-light-35 dark:border-dark-35 
            cursor-pointer hover:border-light-70 dark:hover:border-dark-70 w-[320px]" :class="{ '!border-accent-blue outline-2 outline outline-accent-blue': model.character.people === i }">
                <Avatar :src="people.name" :text="`Image placeholder`" class="h-[320px]" />
                <span class="text-xl font-bold text-center">{{ people.name }}</span>
                <span class="w-full border-b border-light-50 dark:border-dark-50"></span>
                <span class="text-wrap word-break">{{ people.description }}</span>
            </div>
        </div>
    </template>
</template>

<script setup lang="ts">
import type { CharacterBuilder } from '~/shared/character';
import type { CharacterConfig } from '~/types/character';

const { config } = defineProps<{
    config: CharacterConfig,
}>();
const model = defineModel<CharacterBuilder>();

const emit = defineEmits(['next']);
</script>