---
import { Icon } from 'astro-icon/components';
import { Image } from 'astro:assets';

import { formatDate } from '@support/time';
import { getDirectusImageURL } from '@/support/url';

interface Props {
  title: string;
  subTitle: string;
  url: string;
  pubDate: Date;
  imgOne: string;
  imgOneAlt: string;
  imgTwo?: string;
  imgTwoAlt?: string;
}

const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = Astro.props;
---

<div class="smooth-reveal flex flex-col px-4 py-10 mx-auto w-full">
  <a
    class="md:card-base-hidden group flex flex-col-reverse md:grid md:items-center md:grid-cols-2 lg:grid lg:grid-cols-2 md:gap-8 xl:gap-16 w-full md:px-8 md:py-8"
    href={url}
    data-astro-prefetch
  >
    <div class="bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6">
      <h2 class="card-text-header mb-2">
        {title}
      </h2>
      <p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-8">
        {subTitle}
      </p>
      <div class="flex items-center justify-between w-full">
        <div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2">
          <div class="button-text-title flex relative items-center text-center">
            <span class="mr-2">
              Read More
            </span>
            <Icon
              name="mdi:keyboard-arrow-right"
              class="button-hover-arrow"
            />
          </div>
        </div>
        <span class="card-text-description text-sm ml-auto">
          {formatDate(pubDate)}
        </span>
      </div>
    </div>
    {!imgTwo ? (
    <div>
      <Image
        class="rounded-2xl rounded-b-none md:rounded-2xl md:shadow-2xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
        src={getDirectusImageURL(imgOne)}
        alt={imgOneAlt}
        draggable="false"
        loading="lazy"
        width="850"
        height="420"
        inferSize={true}
      />
    </div>
    ) : (
    <>
      <div class="md:hidden">
        <Image
          class="rounded-2xl rounded-b-none shadow-2xl w-full h-full sm:max-h-80 object-cover"
          src={getDirectusImageURL(imgOne)}
          alt={imgOneAlt}
          draggable="false"
          loading="lazy"
          width="850"
          height="420"
          inferSize={true}
        />
      </div>
      <div class="hidden md:flex md:items-start">
        <Image
          class="rounded-xl z-10 shadow-2xl w-3/5 h-full object-cover"
          src={getDirectusImageURL(imgOne)}
          alt={imgOneAlt}
          draggable="false"
          loading="lazy"
          width="600"
          height="310"
          inferSize={true}
        />
        <Image
          class="rounded-xl shadow-2xl w-3/5 h-full -ml-16 mt-12 object-cover"
          src={getDirectusImageURL(imgTwo)}
          alt={imgTwoAlt}
          draggable="false"
          loading="lazy"
          width="600"
          height="310"
          inferSize={true}
        />
      </div>
    </>
    )}
  </a>
</div>