import { MaterialIcon } from "../Icons/MaterialIcon"
import { BreadcrumbSkeleton } from "./Breadcrumb/BreadcrumbSkeleton"
import { BreadcrumbsProps } from "./types"
import { variants } from "./variants"

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

export function BreadcrumbsSkeleton({
  color,
  size,
}: Pick<BreadcrumbsProps, "color" | "size">) {
  const classNames = variants({ color, size })

  return (
    <nav className={classNames}>
      <ol className={styles.breadcrumbs}>
        <BreadcrumbSkeleton>
          <MaterialIcon icon="home" size={20} color="CurrentColor" />
        </BreadcrumbSkeleton>
        <BreadcrumbSkeleton>
          <SkeletonShimmer width="20ch" />
        </BreadcrumbSkeleton>
        <BreadcrumbSkeleton isLastBreadcrumb>
          <SkeletonShimmer width="20ch" />
        </BreadcrumbSkeleton>
      </ol>
    </nav>
  )
}