---
import VSCodiumIcon from "../assets/icons/coding/vscodium.svg";
import IntelliJIdeaIcon from "../assets/icons/coding/intellij.svg";
import TypeScriptIcon from "../assets/icons/coding/typescript.svg";
import GoIcon from "../assets/icons/coding/go.svg";
import RustIcon from "../assets/icons/coding/rust.svg";
import LuaUIcon from "../assets/icons/coding/lua.svg";
import JavaIcon from "../assets/icons/coding/java.svg";
import PythonIcon from "../assets/icons/coding/python.svg";
import SvelteIcon from "../assets/icons/coding/svelte.svg";
import ReactIcon from "../assets/icons/coding/react.svg";
import NextIcon from "../assets/icons/coding/next.svg";
import AstroIcon from "../assets/icons/coding/astro.svg";
---

<section class="!mb-0">
	<legend>tools</legend>

	<!-- separator -->
	<div class="flex items-center gap-4 text-subtext0 text-sm font-medium mb-2">
		<hr class="w-4 border-surface1" />
		<span>editors</span>
		<hr class="flex-grow border-surface1" />
	</div>

	<div class="flex gap-1 mb-4 *:bg-surface0/50 *:border *:border-surface1 *:rounded-md *:p-1.5 *:text-sm *:flex *:items-center *:gap-1.5">
		<div>
			<VSCodiumIcon class="size-5" />
			<span>VSCodium</span>
		</div>
		<div>
			<IntelliJIdeaIcon class="size-5" />
			<span>IntelliJ IDEA</span>
		</div>
	</div>

	<!-- separator -->
	<div class="flex items-center gap-4 text-subtext0 text-sm font-medium my-2">
		<hr class="w-4 border-surface1" />
		<span>languages</span>
		<hr class="flex-grow border-surface1" />
	</div>

	<div class="flex gap-1 mb-4 *:bg-surface0/50 *:border *:border-surface1 *:rounded-md *:p-1.5 *:text-sm *:flex *:items-center *:gap-1.5">
		<div>
			<TypeScriptIcon class="size-5" />
			<span>TypeScript</span>
		</div>
		<div>
			<GoIcon class="size-5" />
			<span>Go</span>
		</div>
		<div>
			<RustIcon class="size-5" />
			<span>Rust</span>
		</div>
		<div data-tooltip="The Roblox version">
			<LuaUIcon class="size-5" />
			<span>Luau</span>
		</div>
		<div>
			<JavaIcon class="size-5" />
			<span>Java</span>
		</div>
		<div>
			<PythonIcon class="size-5" />
			<span>Python</span>
		</div>
	</div>

	<!-- separator -->
	<div class="flex items-center gap-4 text-subtext0 text-sm font-medium my-2">
		<hr class="w-4 border-surface1" />
		<span>frameworks</span>
		<hr class="flex-grow border-surface1" />
	</div>
	<div class="flex gap-1 *:bg-surface0/50 *:border *:border-surface1 *:rounded-md *:p-1.5 *:text-sm *:flex *:items-center *:gap-1.5">
		<div>
			<SvelteIcon class="size-5" />
			<span>Svelte</span>
		</div>
		<div>
			<ReactIcon class="size-5" />
			<span>React</span>
		</div>
		<div>
			<NextIcon class="size-5" />
			<span>Next</span>
		</div>
		<div>
			<AstroIcon class="size-5" />
			<span>Astro</span>
		</div>
	</div>
</section>