import React from 'react'

import Button from '../Button/Button'
import { hasValue } from '../../services/HelperServiceTyped'
import MdashCheck from '../Mdash/MdashCheck'
import { Skeleton } from '../Skeleton/Skeleton'
import { type MetricsSummaryProps } from './ScoreCardType'
import styles from './_score-card.module.scss'

const MetricsSummary = ({
  description,
  buttonProps,
  loading,
  backgroundColor,
}: MetricsSummaryProps) => {
  const parentContainerStyles = {
    ...(backgroundColor
      ? { backgroundColor: `var(--${backgroundColor})` }
      : {}),
  }

  return (
    <div
      className={styles.metricsSummaryContainer}
      style={parentContainerStyles}
    >
      {loading ? (
        <Skeleton height={20} borderRadius={4} />
      ) : (
        <MdashCheck
          customClass={styles.metricsSummaryDescription}
          check={hasValue(description)}
        >
          {description}
        </MdashCheck>
      )}
      <Button {...buttonProps} />
    </div>
  )
}

export default MetricsSummary