import type { FunctionComponent } from "react"
import type { JSX } from "react"

import styles from "./PresetCardSkeleton.module.scss"

interface IPresetCardSkeletonProps {
  aspectRatio?: number
}

export const PresetCardSkeleton: FunctionComponent<IPresetCardSkeletonProps> = ({
  aspectRatio = 16 / 9,
}): JSX.Element => {
  return (
    <div className={styles.skeletonCard}>
      <div
        className={styles.skeletonPreview}
        style={{ aspectRatio }}
      />
      <div className={styles.skeletonFooter}>
        <div className={styles.skeletonLine} />
        <div className={styles.skeletonLineShort} />
      </div>
    </div>
  )
}
