import ContentCard from "@/components/ContentCard";
import NewsItem from "@/components/home/NewsItem";
import Link from "next/link";
import { LogItem } from "../../../lib/log-item";

const newsItemColors = [
  'text-white',
  'text-red-300',
  'text-red-400',
  'text-red-500',
  'text-red-600',
]

export default function Changelog(props: { changelogData: LogItem[] }) {
  return (
    <ContentCard outerClass={"col-span-1"} innerClass={"!shadow-red-500"}>
      <div className="h-full grid grid-rows-[auto_1fr_auto] content-start whitespace-nowrap ">

        <div>
          <h2> {'< What\'s new? >'} </h2>
          <hr />
        </div>
        <div>
          <ul className="list-disc list-inside mr-7 marker:font-ibm marker:text-red-400 ">
            {
              props.changelogData.map((log, index) => {
                let mostRecent = index == 0 ? true : false;

                return (
                  <li key={log.id}>
                    <NewsItem
                      date={log.date}
                      title={log.title}
                      color={newsItemColors[index]}
                      link={[log.link, log.linkName]}
                      mostRecent={mostRecent} />
                  </li>
                )
              })
            }
          </ul>
        </div>

        <div>
          <hr />
          <div>
            {'//'} For more, head over to the <Link href="/changelog">changelog</Link>
          </div>
        </div>
      </div>

    </ContentCard>
  )
}