import MembershipLevelIcon from "@/components/Levels/Icon"

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 className={styles.header}>
      <tr className={styles.iconRow}>
        <th className={styles.verticalTableHeader} />
        {levels.map((level, idx) => {
          return (
            <th key={"image" + level.level_id + idx} className={styles.iconTh}>
              {activeLevel === level.level_id ? <YourLevel /> : null}
              <MembershipLevelIcon
                color="red"
                level={level.level_id}
                height="50"
                width="100"
              />
            </th>
          )
        })}
      </tr>
      <tr>
        <th />
        {levels.map((level, idx) => {
          return (
            <th
              key={"summary" + level.level_id + 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>
  )
}
