---
import { Icon } from 'astro-icon/components';
import Logo from '@components/ui/logos/Logo.astro';

interface Props {
  topic: string;
  area: string;
  date: string;
  url: string;
  logoUrlLight?: string;
  logoUrlDark?: string;
  logoIcon?: string;
}

const { topic, area, date, url, logoUrlLight, logoUrlDark, logoIcon } = Astro.props;
---

<div class="smooth-reveal group flex flex-col">
  <a
    class="card-base flex items-center"
    href={url}
  >
    <div class="p-4 md:p-10">
      <div class="flex items-center">
        {logoUrlLight ? (
        <div class="card-hover-icon-scale mr-5">
          <Logo
            srcLight={logoUrlLight}
            srcDark={logoUrlDark}
            alt={`Logo of ${topic}`}
          />
        </div>
        ) : logoIcon ? (
        <div class="mr-5 text-header">
          <Icon name={logoIcon} class="card-hover-icon-scale h-12 w-12" />
        </div>
        ) : null}
        <div class="grow text-left">
          <span class="card-text-title block text-lg">
            {topic}
          </span>
          <span class="card-text-description block mt-1 font-medium text-xs uppercase">
            {area} - {new Date(date).getFullYear()}
          </span>
        </div>
      </div>
      <div class="ml-6 flex">
        <div class="relative inline-block">
          <div class="card-text-title card-hover-text-title flex relative mx-auto min-h-11 items-center font-semibold text-md sm:mx-0 sm:mt-4">
            <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>
        </div>
      </div>
    </div>
  </a>
</div>