import Image from "@/components/Image"

import LevelSummary from "../../LevelSummary"
import YourLevel from "../../YourLevelScript"

import styles from "./desktopHeader.module.css"

import type {
  DesktopSelectColumns,
  LargeTableProps,
} from "@/types/components/overviewTable"

export default function DesktopHeader({
  levels,
  activeLevel,
  Select,
}: LargeTableProps) {
  return (
    <thead>
      <tr className={styles.iconRow}>
        <th className={styles.verticalTableHeader} />
        {levels.map((level, idx) => {
          return (
            <th key={"image" + level.level + idx} className={styles.iconTh}>
              {activeLevel === level.level ? <YourLevel /> : null}
              <Image
                height={50}
                width={100}
                alt={level.name}
                src={level.icon}
              />
            </th>
          )
        })}
      </tr>
      <tr>
        <th />
        {levels.map((level, idx) => {
          return (
            <th
              key={"summary" + level.level + idx}
              className={styles.summaryTh}
            >
              <LevelSummary level={level} />
            </th>
          )
        })}
      </tr>
      {Select && (
        <tr>
          <th />
          {["A", "B", "C"].map((column, idx) => {
            return (
              <th key={column + idx} className={styles.select}>
                <Select column={column as DesktopSelectColumns["column"]} />
              </th>
            )
          })}
        </tr>
      )}
    </thead>
  )
}