<script setup lang="ts">
import { getFilename as getPattern, patterns } from '../pattern';
import { getFilename as getTopper, toppers } from '../topper';

const props = defineProps(['cb', 'patterns']);
type pType = {
    list: typeof patterns | typeof toppers,
    func: any
}
const p = {
    list: [],
    func: () => { }
} as pType

if (props.patterns == 'pattern') {
    p.list = patterns;
    p.func = getPattern
} else if (props.patterns == 'topper') {
    p.list = toppers
    p.func = getTopper
}
</script>
<template>
    <template v-for="item in p.list">
        <NuxtImg :src="p.func(item.id)" class="picker-item" @click="props.cb(item.id)" v-if="item.filename" />
        <span class="picker-item picker-item--empty" @click="props.cb(item.id)" v-else />
    </template>
</template>