---
import { Image } from "astro:assets";
import Link from "@components/Link.astro";

interface InformationItem {
  image: ImageMetadata;
  location: string;
  main: string;
  link?: string;
  date: string;
  date_opt?: string;
}

interface Props {
  information: InformationItem[];
}

const { information } = Astro.props;
---

{
  information.map((item) => (
    <li class="bg-tertiary/10 flex w-full items-center gap-2 rounded-sm p-3 transition-transform duration-300 hover:-translate-y-1">
      <Image
        src={item.image}
        alt={item.location}
        class="h-auto max-w-12 rounded-sm"
        loading="eager"
      />
      <div>
        <p class="text-secondary font-medium">{item.main}</p>
        {item.link ? (
          <Link
            href={item.link}
            class="text-secondary/70 decoration-tertiary text-sm underline hover:no-underline"
          >
            {item.location}
          </Link>
        ) : (
          <p class="text-secondary/70 text-sm">{item.location}</p>
        )}
      </div>
      <div class="grow text-right">
        <p class="text-secondary/70 font-mono text-sm font-light text-nowrap">
          {item.date}
        </p>
        {item.date_opt ? (
          <p class="text-secondary/70 text-sm">{item.date_opt}</p>
        ) : null}
      </div>
    </li>
  ))
}
