import { ChevronRightIcon, HouseIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"

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

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

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