import { useRouter } from 'next/router';
import React from 'react'
import { Table } from 'react-bootstrap'
import styles from '../styles/AvisList.module.css'

export default function AvisList({ avis }) {
    const router = useRouter();
    function handleClick(id) {
        router.push(`/avis/${id}`);
    }
    function truncateComment(text) {
        if(text.length > 100) {
            return text.substring(0, 100) + "..."
        }
        return text;
    }
    return (
        <Table>
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Note globale</th>
                    <th>Commentaire</th>
                    <th>Positivité</th> 
                    <th>Source</th>
                </tr>
            </thead>
            <tbody>
                {avis.map(({ id, note_principale, commentaire,analyse, date, nom_source }) => {
                    return <tr onClick={() => handleClick(id)} key={id} className={styles.row}>
                        <td>{date}</td>
                        <td>{note_principale} / 10</td>
                        <td>{truncateComment(commentaire)}</td>
                        <td>{analyse}</td>
                        <td>{nom_source}</td>
                    </tr>
                })}
            </tbody>
        </Table>
    )
}