import React from 'react'
import { Card, Col, Row, Table } from 'react-bootstrap';
import { BsPersonFill } from 'react-icons/bs';
import styles from '../styles/Avis.module.css'

export default function Avis({ age, sex, text, date, grade, gradeOther }) {
    return (
        <Card>
            <Card.Title>Avis</Card.Title>
            <Card.Body>
                <Row>
                    <h2>Auteur</h2>
                    <Col xs={1}>
                        <BsPersonFill className={styles.personIcon} />
                    </Col>
                    <Col className='d-flex flex-column'>
                        <p>Age : {age}</p>
                        <p>Sexe : {sex}</p>
                        <p>Date de publication : {date}</p>
                    </Col>
                </Row>
                <Row>
                    <h2>Notes</h2>
                    <Table>
                        <thead>
                            <tr>
                                <th>Critère</th>
                                <th>Note</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Général</td>
                                <td>{grade} / 10</td>
                            </tr>
                            {gradeOther.map(({ title, grade }) => {
                                return <tr key={title}>
                                    <td>{title}</td>
                                    <td>{grade}/10</td>
                                </tr>
                            })}
                        </tbody>
                    </Table>
                </Row>
                <Row>
                    <Card>
                        <Card.Header>Commentaire</Card.Header>
                        <Card.Body>
                            {text}
                        </Card.Body>
                    </Card>
                </Row>
            </Card.Body>
        </Card>
    )
}