<script setup lang="ts">
  import type { TmdbSortData } from "@/libs/apis/tmdb/orders";

  const emit = defineEmits(["click"]);

  const { sortData } = defineProps<{ sortData: TmdbSortData }>();

  const onButtonClicked = (event: Event): void => {
    event.preventDefault();
    emit("click");
  };
</script>

<template>
  <th :aria-sort="sortData.sortOrder" scope="col">
    <button
      class="button-invisible" :data-sort-value="sortData.sortValue" role="button"
      @click="onButtonClicked"
    >
      <slot></slot>
      <span aria-hidden="true" class="sort-indicator"></span>
    </button>
  </th>
</template>

<style lang="css" scoped>
  th {
    position: relative;
  }

  button {
    display: inline-block;
    align-content: center;
    font-size: var(--s-1);
    font-weight: var(--brkly-font-weight-semibold);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-small);
    background: inherit;

    .sort-indicator {
      opacity: 0.5;

      &::after {
        content: "♢";
        display: inline-block;
        min-inline-size: var(--s-1);
        border-inline-end-style: var(--s3);
        color: currentcolor;
        text-align: center;

        table th[aria-sort="descending"] & {
          content: "▼";
          color: currentcolor;
        }

        table th[aria-sort="ascending"] & {
          content: "▲";
          color: currentcolor;
        }
      }
    }

    &:hover {
      .sort-indicator {
        opacity: 1;
      }
    }
  }
</style>
