<script setup lang="ts">
import PawIcon from "@/assets/icons/PawIcon.vue";
import TwitterIcon from "@/assets/icons/TwitterIcon.vue";

interface ArtistLink {
  furaffinity?: string;
  twitter?: string;
}

interface Attribution {
  artwork: string;
  artist: string;
  links: ArtistLink;
}

interface Props {
  attributions: Attribution[];
}

defineProps<Props>();
</script>

<template>
  <table class="attribution-table">
    <thead class="attribution-table__head">
      <tr class="attribution-table__row">
        <th class="attribution-table__heading artwork">Artwork</th>
        <th class="attribution-table__heading artist">Artist</th>
      </tr>
    </thead>
    <tbody class="attribution-table__body">
      <tr
        class="attribution-table__row"
        v-for="(attrib, idx) in attributions"
        :key="idx"
      >
        <td class="attribution-table__cell artwork">
          <img :src="attrib.artwork" alt="Image attribution" />
        </td>
        <td class="attribution-table__cell artist">
          <p>
            {{ attrib.artist }}
          </p>
          <ul>
            <li v-if="attrib.links.furaffinity">
              <a :href="attrib.links.furaffinity" title="Fur Affinity">
                <PawIcon />
              </a>
            </li>
            <li v-if="attrib.links.twitter">
              <a :href="attrib.links.twitter" title="Twitter">
                <TwitterIcon />
              </a>
            </li>
          </ul>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style lang="scss">
.attribution-table {
  &__cell {
    &.artwork {
      width: 10rem;

      img {
        width: 100%;
      }
    }

    &.artist {
      p {
        text-align: center;
      }

      ul {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;

        list-style: none;
        margin: 0;
        padding: 0;
      }

      li {
        flex: 0 0 2rem;
        max-width: 2rem;
        padding: 0 0.5rem;
      }

      a {
        box-shadow: none;
      }
    }
  }
}
</style>
