import { ChevronRightIcon, HouseIcon } from "@/components/Icons"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import styles from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"

export default function BreadcrumbsSkeleton() {
  return (
    <nav className={styles.breadcrumbs}>
      <ul className={styles.list}>
        <li className={styles.listItem}>
          <span className={styles.homeLink} color="peach80">
            <HouseIcon color="peach80" />
          </span>
          <ChevronRightIcon
            aria-hidden="true"
            color="peach80"
            height={20}
            width={20}
          />
        </li>

        <li className={styles.listItem}>
          <Footnote color="burgundy" type="bold">
            <SkeletonShimmer width={"12ch"} />
          </Footnote>
        </li>
      </ul>
    </nav>
  )
}