<script lang="ts">
  import type { ActivityHistoryEntry } from '$lib/Data/AniList/activity';
  import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
  import ActivityHistoryGrid from '../ActivityHistory/Grid.svelte';

  interface Props {
    user: AniListAuthorisation;
    activities: ActivityHistoryEntry[];
    year: number;
    activityHistoryPosition: 'TOP' | 'BELOW_TOP' | 'ORIGINAL';
  }

  let {
    user,
    activities,
    year,
    activityHistoryPosition
  }: Props = $props();
</script>

<div
  class="categories-grid"
  style={`padding-${activityHistoryPosition === 'ORIGINAL' ? 'top' : 'bottom'}: 0;`}
>
  <div class="category-grid bottom-category pure-category category">
    <div id="activity-history">
      <ActivityHistoryGrid {user} activityData={activities} currentYear={year} />
    </div>
  </div>
</div>
