import { Fragment } from "react"

import SkeletonShimmer from "@/components/SkeletonShimmer"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

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

export default function SidebarNavigationSkeleton() {
  const skeletonWidths = ["8ch", "10ch", "9ch", "12ch", "24ch", "10ch", "8ch"]
  return (
    <aside className={styles.sidebar}>
      <nav className={styles.nav}>
        <Subtitle type="two" color="baseTextHighContrast">
          <SkeletonShimmer width={"10ch"} />
        </Subtitle>
        <Divider color="beige" />
        <ul className={styles.list}>
          {skeletonWidths.map((width, index) => (
            <Fragment key={index}>
              {index === 4 && <Divider color="beige" />}
              <li>
                <Link href="" size="regular" variant="sidebar">
                  <SkeletonShimmer width={width} />
                </Link>
              </li>
            </Fragment>
          ))}
        </ul>
      </nav>
    </aside>
  )
}