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

import BaseLayout from '../../layouts/BaseLayout.astro'

import type { ComponentProps } from 'astro/types'

type AdminLink = {
  icon: ComponentProps<typeof Icon>['name']
  title: string
  href: string
}

const adminLinks: AdminLink[] = [
  {
    icon: 'ri:box-3-line',
    title: 'Services',
    href: '/admin/services',
  },
  {
    icon: 'ri:file-list-3-line',
    title: 'Attributes',
    href: '/admin/attributes',
  },
  {
    icon: 'ri:user-3-line',
    title: 'Users',
    href: '/admin/users',
  },
  {
    icon: 'ri:chat-settings-line',
    title: 'Comments',
    href: '/admin/comments',
  },
  {
    icon: 'ri:lightbulb-line',
    title: 'Service suggestions',
    href: '/admin/service-suggestions',
  },
  {
    icon: 'ri:megaphone-line',
    title: 'Announcements',
    href: '/admin/announcements',
  },
  {
    icon: 'ri:database-2-line',
    title: 'Database',
    href: 'https://db.kycnot.me',
  },
]
---

<BaseLayout pageTitle="Admin Dashboard" widthClassName="max-w-screen-xl">
  <h1 class="font-title mb-8 text-3xl font-bold text-zinc-100">
    <Icon name="ri:home-gear-line" class="me-1 inline-block size-10 align-[-0.35em]" />
    Admin Dashboard
  </h1>

  <div class="grid grid-cols-[repeat(auto-fill,minmax(calc(var(--spacing)*40),1fr))] gap-4">
    {
      adminLinks.map((link) => (
        <a
          href={link.href}
          class="group flex flex-col items-center justify-evenly rounded-lg border border-zinc-800 bg-gradient-to-br from-zinc-900/90 to-zinc-900/50 py-3 text-center shadow-lg backdrop-blur-xs transition-all duration-300 hover:-translate-y-0.5 hover:from-zinc-800/90 hover:to-zinc-800/50 hover:shadow-xl hover:shadow-zinc-900/20"
        >
          <Icon name={link.icon} class="size-8 text-zinc-400 transition-colors group-hover:text-green-400" />
          <span class="font-title text-xl leading-none font-semibold text-zinc-100 transition-colors group-hover:text-green-400">
            {link.title}
          </span>
        </a>
      ))
    }
  </div>
</BaseLayout>