import React from 'react'
import PropTypes from 'prop-types'
import { Typography } from '../Typography/Typography'

/**
 * Renders the content of a notification for a file upload.
 *
 * @component
 * @param {Object} props - The component props.
 * @param {Object} props.file - The file object.
 * @param {string} props.children - The content to be displayed.
 * @param {string} props.color - The color of the typography.
 * @param {React.Ref} ref - The ref to be forwarded to the Typography component.
 * @returns {JSX.Element} The rendered NotificationContent component.
 */
export const NotificationContent = React.forwardRef(({ file, color, children }, ref) => {
  return (
    <Typography tokens={{ color }} ref={ref}>
      <Typography variant={{ bold: true }} tokens={{ color }}>
        {file.name}
      </Typography>
      {children}
    </Typography>
  )
})

NotificationContent.displayName = 'NotificationContent'

NotificationContent.propTypes = {
  /**
   * The file object.
   */
  file: PropTypes.object,
  /**
   * The content to be displayed.
   */
  children: PropTypes.string,
  /**
   * The color of the typography.
   */
  color: PropTypes.string
}