<script setup lang="ts">
import FAIcon from '@/assets/icons/FurAffinityIcon.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">
          {{ $t('attributions.artwork.headings[0]') }}
        </th>
        <th class="attribution-table__heading artist">
          {{ $t('attributions.artwork.headings[1]') }}
        </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">
                <FAIcon />
              </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 {
        margin: 0.5rem 0;
        text-align: center;
      }

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

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

      li {
        flex: 0 0 2rem;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;

        background: var(--color-artist-link-background);

        width: 2rem;
        height: 2rem;
        margin: 0 0.25rem;
        border-radius: 100%;
      }

      a {
        flex: 1 1 auto;
        padding: 0.375rem;
        box-shadow: none;

        &:hover {
          box-shadow: none;
        }
      }

      svg {
        fill: var(--color-artist-link-icon);
      }
    }
  }

  &__row {
    &:hover {
      li {
        background: var(--color-artist-link-background-hover);
      }

      svg {
        fill: var(--color-artist-link-icon-hover);
      }
    }
  }
}
</style>
