<template>
	<footer class="w-full flex px-6 pb-6">
		<div
			:class="[
        'flex flex-col items-center justify-around',
        'container rounded-3xl',
        'px-6 py-4 mx-auto space-y-2',
        'shadow-md transition-all duration-300',
        'bg-green-500 dark:bg-green-600'
      ]"
		>
		<div class="w-full text-white">
      <TitleLogo />
		</div>
		<hr class="w-full text-white/25 border-white/25" />
		<div class="flex justify-between w-full text-white">
			<p><i>Created by <a class="text-white" href="https://t.me/poti_club">POTI</a> with</i> ❤️</p>
			<div :class="[
				'flex space-x-2 text-white',
				'*:hover:scale-125 *:transition-transform *:duration-300'
			]">
				<a href="https://t.me/nevedomhren"><Icon icon="telegram"/></a>
				<a href="https://x.com/markizwer"><Icon icon="x-twitter"/></a>
				<a href="https://git.kernils.ru/POTI/nevedom"><Icon icon="gitea"/></a>
			</div>
		</div>
		</div>
	</footer>
</template>

<script setup lang="ts">
import TitleLogo from './TitleLogo.vue';
import Icon from './Icon.vue';
</script>