---
import { Icon } from 'astro-icon/components';
import { readItems } from '@directus/sdk';

import type { Education } from '@lib/directusTypes';

import directus from '@lib/directus';

const education = await directus.request(
  readItems('site_education', {
    fields: ['*'],
    sort: ['-graduationDate'],
  })
);

const certificate = await directus.request(
  readItems('site_certificate', {
    fields: ['*'],
    sort: ['-issuerDate'],
  })
);

const baseClasses = ' rounded-xl flex flex-col';
const borderClasses = 'border border-neutral-100 dark:border-stone-500/20';
const bgColorClasses =
  'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90';
const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg';
---

<section class:list={['order-first flex flex-col gap-4', Astro.props.className]}>
  <h3
    class="smooth-reveal-1 relative flex w-full items-center gap-3 pb-5 text-5xl text-neutral-800 dark:text-neutral-200"
  >
    Education
  </h3>
  <div class="ml-8">
    <h4 class="smooth-reveal-1 pt-5 text-2xl font-semibold text-neutral-800 dark:text-neutral-200">
      University
    </h4>
    <ul class="space-y-4 py-3">
      {
        education.map(({ institution, area, url }) => {
          return (
            <div class="smooth-reveal-cards mt-4 grid grid-cols-3 gap-4 rounded-xl">
              <div>
                <div
                  class={`p-4 transition-all duration-300 md:p-5 ${shadowClasses} ${bgColorClasses} ${baseClasses} ${borderClasses}`}
                >
                  <h3 class="flex flex-row text-lg font-bold text-neutral-800 dark:text-neutral-200">
                    <Icon
                      name="mdi:university-outline"
                      class="mr-2 h-3 w-3 translate-y-1 md:h-5 md:w-5"
                    />
                    {institution}
                  </h3>
                  <p class="mt-2 ml-7 text-xs font-medium text-neutral-600 uppercase dark:text-neutral-400">
                    {area}
                  </p>
                  <div class="ml-6 flex">
                    <a
                      class="group group-hover relative inline-block gap-x-1 rounded-lg border border-transparent disabled:pointer-events-none disabled:opacity-50"
                      href={url}
                    >
                      <div class="group-hover:text-steel dark:group-hover:text-bermuda transition-text relative z-10 mx-auto flex min-h-[44px] items-center text-sm font-semibold text-neutral-600 decoration-2 duration-300 sm:mx-0 sm:mt-4 dark:text-neutral-300">
                        <span class="relative inline-block overflow-hidden"> Visit Page </span>
                        <Icon
                          name="mdi:keyboard-arrow-right"
                          class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
                        />
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          );
        })
      }
    </ul>
  </div>

  {
    certificate.length > 0 && (
      <div class="ml-8">
        <h4 class="smooth-reveal-1 pt-8 text-2xl font-semibold text-neutral-800 dark:text-neutral-200">
          Certificates
        </h4>
        <ul class="space-y-4 py-3">
          {certificate.map(({ name, issuer, url }) => {
            return (
              <div class="smooth-reveal-cards mt-4 grid grid-cols-3 gap-4 rounded-xl">
                <div>
                  <div
                    class={`p-4 transition-all duration-300 md:p-5 ${shadowClasses} ${bgColorClasses} ${baseClasses} ${borderClasses}`}
                  >
                    <h3 class="flex flex-row text-lg font-bold text-neutral-800 dark:text-neutral-200">
                      <Icon
                        name="mdi:script-text-outline"
                        class="mr-2 h-3 w-3 translate-y-1 md:h-5 md:w-5"
                      />
                      {name}
                    </h3>
                    <p class="mt-2 ml-7 text-xs font-medium text-neutral-600 uppercase dark:text-neutral-400">
                      {issuer}
                    </p>
                    <div class="ml-6 flex">
                      <a
                        class="group group-hover relative inline-block gap-x-1 rounded-lg border border-transparent disabled:pointer-events-none disabled:opacity-50"
                        href={url}
                      >
                        <div class="group-hover:text-steel dark:group-hover:text-bermuda transition-text relative z-10 mx-auto flex min-h-[44px] items-center text-sm font-semibold text-neutral-600 decoration-2 duration-300 sm:mx-0 sm:mt-4 dark:text-neutral-300">
                          <span class="relative inline-block overflow-hidden"> Visit Page </span>
                          <Icon
                            name="mdi:keyboard-arrow-right"
                            class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
                          />
                        </div>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </ul>
      </div>
    )
  }
</section>