---
//TODO:
// - Add highlighted TAs above the rest
// > I think you should have all of them on the site.
// > You could have the notable ones like you do now, but at the bottom, there could be a drop-down or "expand" or "more" or
// > some other section like that which you could click and show the rest

import Layout from '../layouts/Layout.astro'

import TaSection from '../layouts/taSection.astro'
import TaCard from '../components/taCard.astro'
import tadata from '../../static/assets/data/_tadata.json'
import featured_data from '../../static/assets/data/_featureddata.json'

const important_data = tadata.filter(function (el) {
  return [
    'Ibuki 3T (LB 5.5)',
    'DB 7T (No Duplicates)',
    'Kingprotea 1T',
    'Goetia Memorial Quest 2T',
    'Morgan 3T (LB 6) Skadi'
  ].includes(el.title)
})

tadata.sort((a, b) => Date.parse(b.date) - Date.parse(a.date))
important_data.sort((a, b) => Date.parse(b.date) - Date.parse(a.date))
featured_data.sort((a, b) => Date.parse(b.date) - Date.parse(a.date))

const description = 'A collection of TAs previously completed be Firq.'
---

<Layout
  title="TA Collection - Firq FGO Site"
  currentpage="ta-collection"
  descriptionOverride={description}
>
  <TaSection title="Notable TAs" abovetext="">
    {important_data.map((item) => <TaCard {...item} />)}
  </TaSection>
  <TaSection title="Completed TAs">
    {tadata.map((item) => <TaCard {...item} />)}
  </TaSection>
  <TaSection
    title="Featured TAs by other Racers"
    abovetext="TAs done by my fellow Racers, check them out as well!"
  >
    {featured_data.map((item) => <TaCard {...item} />)}
  </TaSection>
  <div class="placeholder"></div>
</Layout>

<style>
  .placeholder {
    visibility: hidden;
    width: 100%;
    height: 5rem;
  }
</style>