<template>
	<section class="py-16">
		<div class="xl:container mx-auto px-6">
			<div class="text-center mb-10">
				<h3 class="text-2xl font-bold mb-3">Anwendungsbereiche</h3>
				<p class="text-gray-600 max-w-2xl mx-auto">Vielseitig einsetzbar für Kreative, Studenten und Berufstätige.</p>
			</div>
			<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
				<div v-for="useCase in useCases" :key="useCase.title" class="text-center p-4 lg:p-6">
					<component :is="iconComponents[useCase.icon]" class="w-8 h-8 lg:w-10 lg:h-10 mx-auto mb-3 text-gray-700" />
					<h4 class="font-semibold mb-1 lg:mb-2 text-sm lg:text-base">{{ useCase.title }}</h4>
					<p class="text-xs lg:text-sm text-gray-600">{{ useCase.description }}</p>
				</div>
			</div>
		</div>
	</section>
</template>

<script setup lang="ts">
import IconPen from "~/components/icons/IconPen.vue";
import IconPalette from "~/components/icons/IconPalette.vue";
import IconClipboard from "~/components/icons/IconClipboard.vue";
import IconBriefcase from "~/components/icons/IconBriefcase.vue";

export interface UseCase {
	icon: "pen" | "palette" | "clipboard" | "briefcase";
	title: string;
	description: string;
}

defineProps<{
	useCases: UseCase[];
}>();

const iconComponents = {
	pen: IconPen,
	palette: IconPalette,
	clipboard: IconClipboard,
	briefcase: IconBriefcase,
};
</script>
