import React from 'react'

import MdashCheck from '../Mdash/MdashCheck'
import styles from './_label-data.module.scss'

export type LabelAndDataProps = {
  /** Content to show as label. */
  label: React.ReactNode
  /** Boolean to decide whether to show data. */
  check: boolean
  /** Optional children element can be added */
  children?: React.ReactNode
  /** Optional class for data. */
  customClass?: string
  /** Optional class for label. */
  labelClass?: string
  /** Content to show in data. */
  data: React.ReactNode
  /** Optional prop to add a test id to the LabelAndData for QA testing */
  qaTestId?: string
}
export default function LabelAndData({
  label,
  data,
  check,
  children,
  customClass = '',
  labelClass = '',
  qaTestId = 'label-and-data',
}: LabelAndDataProps): React.JSX.Element {
  return (
    <span className={styles.labelAndData} qa-test-id={qaTestId}>
      <label className={labelClass}>{label}</label>
      <MdashCheck check={!!check} customClass={customClass}>
        <span className={customClass}>{data}</span>
      </MdashCheck>
      {children}
    </span>
  )
}