export default function FaxosaurusFormPreview( { surveyJson }) {
  const title = surveyJson ? surveyJson.title : 'Loading...';

  const description = surveyJson ? surveyJson.description : '';

  const countQuestions = (pages) => {
    const initialValue = 0
    const sum = pages.reduce(
      (total, page) => total + page.elements.length,
      initialValue
    )
    const noun = sum === 1 ? 'question' : 'questions'
    return [sum, noun].join(' ')
  }

  const countPages = (pages) => {
    const noun = pages.length === 1 ? 'page' : 'pages'
    return [pages.length, noun].join(' ')
  }

  const details = surveyJson ? countPages(surveyJson.pages) + ', ' + countQuestions(surveyJson.pages) +  '.' : '';

  return(
    <div className="faxosaurus-form-preview">
      <p>{title}</p>
      <p><small>{description}</small></p>
      <p><small>{details}</small></p>
    </div>
  )
}