// @ts-nocheck

import { useQuery } from "@tanstack/react-query"
import fosstodonApi from "@/api/fosstodon-api"
import TodayILearnedCard from "@/components/TodayILearnedCard"

const TodayILearned = ({}) => {
  const { data, isLoading } = useQuery({
    queryKey: [`today_I_learned_toots`],
    queryFn: () =>
      fosstodonApi.get(`statuses?tagged=TIL`).then((res) => res.data),
  })

  console.log(data)

  return (
    <>
      <div className="mt-8">
        <h2 className="scroll-m-20 text-[1.3rem] font-semibold border-b pb-2 mb-5">
          Today I learned...
        </h2>

        <div className="grid grid-cols-1 md:grid-cols-1 gap-3">
          {data &&
            data.map((toot, i) => (
              <TodayILearnedCard
                key={i}
                tootBody={toot?.content}
                avatar={toot?.account.header}
              />
            ))}
        </div>
      </div>
    </>
  )
}

export default TodayILearned