<script setup lang="ts">
import { Bell, Search } from '@lucide/vue';
import { iconsPageToc } from '~/shared/examples/icons/page-toc';
import {
	installCode,
	lucideCode,
	mdiCode,
} from '~/shared/examples/icons/usage-examples';

usePageMeta({
	title: 'iconsPage.metaTitle',
});

const { setToc } = usePageToc();

onMounted(() => setToc(iconsPageToc));
</script>

<template>
	<header class="space-y-3">
		<h1 class="text-4xl font-semibold">{{ $t('iconsPage.title') }}</h1>
		<p class="max-w-2xl text-lg leading-8 text-muted-foreground">
			{{ $t('iconsPage.description') }}
		</p>

		<InfoBox>
			{{ $t('iconsPage.infoPrefix') }}
			<TextLink href="https://lucide.dev/icons/?focus=" target="_blank">
				{{ $t('iconsPage.infoLink') }}
			</TextLink>
		</InfoBox>
	</header>

	<section id="installation" class="space-y-5">
		<h2 class="text-2xl font-semibold">
			{{ $t('iconsPage.installationTitle') }}
		</h2>
		<ExampleBlock :code="installCode" :preview="false" />
	</section>

	<section id="lucide-icons" class="space-y-5">
		<h2 class="text-2xl font-semibold">{{ $t('iconsPage.lucideTitle') }}</h2>
		<ExampleBlock :code="lucideCode">
			<div class="flex flex-wrap items-center justify-center gap-2">
				<Button>
					<template #leading>
						<Search class="size-5" />
					</template>
					{{ $t('iconsPage.searchButton') }}
				</Button>
				<IconButton>
					<Bell />
				</IconButton>
			</div>
		</ExampleBlock>
	</section>

	<section id="other-libraries" class="space-y-5">
		<h2 class="text-2xl font-semibold">
			{{ $t('iconsPage.otherLibrariesTitle') }}
		</h2>
		<p class="text-muted-foreground leading-7">
			{{ $t('iconsPage.otherLibrariesDescription') }}
		</p>

		<ExampleBlock :code="mdiCode">
			<div class="max-w-md text-center text-muted-foreground leading-7">
				{{ $t('iconsPage.mdiDescriptionPrefix') }}
				<TextLink href="https://nuxt.com/modules/nuxt-mdi" target="_blank">
					{{ $t('iconsPage.mdiInfoLink') }}
				</TextLink>
			</div>
		</ExampleBlock>
	</section>
</template>
