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({review}) {
    const {date, note_principale,notes_autres, commentaire, sexe_auteur, nom_source, age_auteur} = review;
    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_auteur}</p>
                        <p>Sexe : {sexe_auteur}</p>
                        <p>Date de publication : {date}</p>
                        <p>Source : {nom_source}</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>{note_principale} / 10</td>
                            </tr>
                            {notes_autres && notes_autres.map(({ critere, note }) => {
                                return <tr key={critere}>
                                    <td>{critere}</td>
                                    <td>{note}/10</td>
                                </tr>
                            })}
                        </tbody>
                    </Table>
                </Row>
                <Row>
                    <Card>
                        <Card.Header>Commentaire</Card.Header>
                        <Card.Body>
                            {commentaire}
                        </Card.Body>
                    </Card>
                </Row>
            </Card.Body>
        </Card>
    )
}