/* eslint-disable react/prop-types */

import React, {useState} from 'react'

import Card from '@material-ui/core/Card'
import CardContent from '@material-ui/core/CardContent'
import CardHeader from '@material-ui/core/CardHeader'

import ComponentFactory from '../ComponentFactory'
import {useStyles} from '../index'



export default function MCF_Card (props) {
  const [params, setParams] = useState(props.params)
  const classes = useStyles()

  const renderContents = () => {
    return params.contents.map(contentConfig => {
      contentConfig.params.parentKey = params.key
      return ComponentFactory.createComponent(contentConfig)
    })
  }

  return (
    <Card className={classes.card}>
      <CardHeader
        title={params.mainText}  // string
        subheader={params.secondaryText}  // string
      />
      <CardContent>
        {renderContents()}
      </CardContent>
    </Card>
  )
}