import { MaterialIcon } from "@scandic-hotels/design-system/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}>
          <MaterialIcon
            icon="home"
            size={16}
            color="Icon/Interactive/Secondary"
          />
          <MaterialIcon
            icon="chevron_right"
            aria-hidden="true"
            color="Icon/Interactive/Secondary"
            size={20}
          />
        </li>

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