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}`);
    }

    return (
        <Table>
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Note globale</th>
                    <th>Commentaire</th>
                </tr>
            </thead>
            <tbody>
                {avis.map(({ id, grade, comment, date }) => {
                    return <tr onClick={() => handleClick(id)} key={id} className={styles.row}>
                        <td>{date}</td>
                        <td>{grade} / 10</td>
                        <td>{comment}</td>
                    </tr>
                })}
            </tbody>
        </Table>
    )
}