import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"

import styles from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css"

import { breadcrumbsVariants } from "../variants"

import type { BreadcrumbsProps } from "../breadcrumbs"

export default function BreadcrumbsSkeleton({
  color,
  size,
}: Pick<BreadcrumbsProps, "color" | "size">) {
  const classNames = breadcrumbsVariants({ color, size })
  return (
    <nav className={classNames}>
      <ul className={styles.list}>
        <li className={styles.listItem}>
          <MaterialIcon
            icon="home"
            size={20}
            color="Icon/Interactive/Secondary"
          />
          <MaterialIcon
            icon="chevron_right"
            aria-hidden="true"
            color="Icon/Interactive/Secondary"
            size={20}
          />
        </li>

        <li className={styles.listItem}>
          <Typography variant="Label/xsBold">
            <SkeletonShimmer width="20ch" />
          </Typography>
        </li>
      </ul>
    </nav>
  )
}