---
import { Icon } from 'astro-icon/components'
import PageViews from '../PageViews'

const pathname = new URL(Astro.request.url).pathname
const slug = pathname === '/' ? 'home' : pathname.replace(/^\/|\/$/g, '')
---

<footer class='mx-auto mt-24 w-full'>
	<div class='border-t border-border pt-5'>
		<div
			class='flex flex-col items-center gap-y-3 sm:flex sm:flex-row sm:items-center sm:justify-between sm:gap-y-0'
		>
			<div class='flex gap-x-4 text-sm'>
				<p class=''>2024 kazoottt. All rights reserved.</p>
			</div>

			<div class='flex items-center justify-between'>
				<!-- Social Brands -->
				<div class='flex items-center gap-x-4'>
					<div class='text-center'>
						<PageViews client:load slug={slug} />
					</div>
					<!-- Linkedin -->
					<a
						class='inline-block text-muted-foreground transition-all hover:text-muted-foreground/75'
						href='mailto:work@kazoottt.top'
						aria-label='Email'
					>
						<svg
							xmlns='http://www.w3.org/2000/svg'
							width='20'
							height='20'
							viewBox='0 0 24 24'
							fill='none'
							stroke='currentColor'
							stroke-width='2'
							stroke-linecap='round'
							stroke-linejoin='round'
							class='h-5 w-5'
						>
							<rect width='20' height='16' x='2' y='4' rx='2'></rect>
							<path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'></path>
						</svg>
					</a>
					<a
						class='inline-block text-muted-foreground transition-all hover:text-muted-foreground/75'
						href='https://github.com/kazoottt'
						aria-label='GitHub'
					>
						<Icon name='github' class='h-5 w-5' />
					</a>
					<a
						class='inline-block text-muted-foreground transition-all hover:text-muted-foreground/75'
						href='https://x.com/kazoottt'
						aria-label='Twitter'
					>
						<Icon name='twitter' class='h-5 w-5' />
					</a>
					<a
						class='inline-block text-muted-foreground transition-all hover:text-muted-foreground/75'
						href='/rss.xml'
						aria-label='RSS Feed'
					>
						<Icon name='rss' class='h-5 w-5' />
					</a>
				</div>
				<!-- End Social Brands -->
			</div>
		</div>
	</div>
</footer>
