import React from 'react'
import { Alert, 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;
    function getAnalyse() {
        let res = "Non calculé"
        notes_autres.map(({ critere, note }) => {
            if(critere === "analyse") {
                res=note.toString();
            }
        })
        return res
    }
    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 }) => {
                                if(critere !== "analyse") {
                                    return <tr key={critere}>
                                        <td>{critere}</td>
                                        <td>{note}/10</td>
                                    </tr>
                                }
                            })}
                        </tbody>
                    </Table>
                </Row>
                <Row>
                    <Card>
                        <Card.Header>Commentaire</Card.Header>
                        <Card.Body>
                            <Alert variant={getAnalyse() > 0 ? "success" : "danger"}>
                                <p>Score de positivité : {getAnalyse()}</p>
                            </Alert>
                            {commentaire}
                        </Card.Body>
                    </Card>
                </Row>
            </Card.Body>
        </Card>
    )
}