import React, { FC } from 'react'
import { Card, CardBody } from 'reactstrap'
import { CommentModel } from '../../models'
import { CommentsSectionModel } from '../../models/pageSections'



interface Comments {
  staticContent?: CommentsSectionModel,
  items?: CommentModel []
}

const CommentsSection: FC<Comments> = ({
  staticContent,
  items = []
}) => {

  return <section className="mb-5">
    <Card className="card bg-light">
      <CardBody className="card-body">
        <form className="mb-4">           
          <textarea className="form-control" rows={3} placeholder={staticContent?.leaveComment}></textarea>
        </form>

        {items.map((comment, index) => <div key={index} className={`d-flex ${index < items.length - 1 ?  'mb-4' : ''}`}>
          <div className="flex-shrink-0">
            <img className="rounded-circle"  {...comment.author.image} />
          </div>
          <div className="ms-3">
            <div className="fw-bold">{comment.author.nickName}</div>
            {comment.comment}
          
            {comment.responses? comment.responses.map((response, index) => <div key={index} className="d-flex mt-4">
              <div className="flex-shrink-0">
                <img className="rounded-circle" {...response.author.image} />
              </div>
              <div className="ms-3">
                <div className="fw-bold">{response.author.nickName}</div>
                {response.comment}
              </div>
            </div>) : ''}
          </div>
        </div>)}

        
      </CardBody>
    </Card>
  </section>

}

export {
  CommentsSection
}