import React, { type CSSProperties } from 'react'

import styles from './_skeleton.module.scss'

export type SkeletonProps = {
  /** Optionally override the height style property */
  height?: CSSProperties['height']
  /** Optionally override the width style property */
  width?: CSSProperties['width']
  /** Optionally override the border radius style property */
  borderRadius?: CSSProperties['borderRadius']
  /** Optional prop to add a test id to the Skeleton for QA testing */
  qaTestId?: string
}

const Skeleton = ({
  height,
  width,
  borderRadius,
  qaTestId = 'skeleton',
}: SkeletonProps): React.JSX.Element => {
  return (
    <div
      className={styles.loader}
      style={{
        height,
        width,
        borderRadius,
      }}
      qa-test-id={qaTestId}
    />
  )
}

const HeaderMetric = () => {
  return (
    <div className={styles.headerMetricContainer}>
      <Skeleton width={10} height={10} />
      <div className={styles.headerMetricColumn}>
        <Skeleton width={80} height={10} />
        <Skeleton width={150} height={15} />
        <Skeleton width={65} height={10} />
      </div>
    </div>
  )
}

const CardFooter = () => {
  return (
    <div className={styles.cardFooterContainer}>
      <div className={styles.cardFooterContent}>
        <Skeleton height={10} />
        {/** Renders at 70% width to simulate shorter secondary text below the title */}
        <Skeleton width='70%' height={8} />
      </div>
    </div>
  )
}

const Card = () => {
  return (
    <div className={styles.cardContainer}>
      {/** Uses 175 as default width to match card's minimum width */}
      <Skeleton height={175} borderRadius={0} />
    </div>
  )
}

Skeleton.Card = Card
Skeleton.CardFooter = CardFooter

Skeleton.HeaderMetric = HeaderMetric

export { Skeleton }