import SkeletonShimmer from "@/components/SkeletonShimmer"
import Divider from "@/components/TempDesignSystem/Divider"

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

export default function ReferenceCardSkeleton() {
  return (
    <div className={styles.referenceCard}>
      <div className={styles.referenceRow}>
        <SkeletonShimmer width="100%" height="28px" />
      </div>
      <Divider color="subtle" className={styles.divider} />
      <div className={styles.referenceRow}>
        <SkeletonShimmer width="20%" height="24px" />
        <SkeletonShimmer width="20%" height="24px" />
      </div>
      <div className={styles.referenceRow}>
        <SkeletonShimmer width="20%" height="24px" />
        <SkeletonShimmer width="20%" height="24px" />
      </div>
      <div className={styles.referenceRow}>
        <SkeletonShimmer width="20%" height="24px" />
        <SkeletonShimmer width="20%" height="24px" />
      </div>
      <Divider color="subtle" className={styles.divider} />
      <div className={styles.referenceRow}>
        <SkeletonShimmer width="100%" height="28px" />
      </div>
      <div className={styles.actionArea}>
        <SkeletonShimmer width="100%" height="44px" />
        <SkeletonShimmer width="100%" height="44px" />
      </div>
    </div>
  )
}