<template>
	<a-card hoverable :style="style" @click="switchTheme">
		<template #cover>
			<a-image :preview="false" :src="theme.image" :style="style" />
		</template>
		<a-card-meta :title="theme.name"></a-card-meta>
	</a-card>
</template>
<script lang="ts" setup>
	import { PropType } from 'vue'

	const props = defineProps({
		theme: {
			type: Object as PropType<{ name: string; image: string }>,
			required: true,
		},
		selected: {
			type: Boolean,
			required: false,
			default: () => false,
		},
	})
	const { theme, selected } = toRefs(props)
	const style = computed(() => {
		return selected.value
			? {
					border: '1px solid #20476d ',
				}
			: {}
	})
	const switchTheme = () => {
		console.log(switchTheme)
	}
</script>
