'use client'
import React, { useState, useEffect } from 'react';
import Table from '@/components/Table';
import Button from '@/components/Button';

const columns = [
  { name: 'Nom', transform: (row) => row.Nom },
  { name: 'Niveau', transform: (row) => row.Niveau },
  { name: 'Effectif', transform: (row) => row.Effectif },
];

export default function Page() {
  const [classes, setClasses] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);

  useEffect(() => {
    fetchClasses();
  }, [currentPage]);

  const fetchClasses = async () => {
    const fakeData = {
      classes: [
        { Nom: 'Classe A', Niveau: '1ère année', Effectif: 30 },
        { Nom: 'Classe B', Niveau: '2ème année', Effectif: 25 },
        { Nom: 'Classe C', Niveau: '3ème année', Effectif: 28 },
      ],
      totalPages: 3
    };
    setClasses(fakeData.classes);
    setTotalPages(fakeData.totalPages);
  };

  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  const handleCreateClass = () => {
    console.log('Créer une nouvelle classe');
  };

  return (
    <div className='p-8'>
      <h1 className='heading-section'>Gestion des Classes</h1>
      <Button text="Créer une nouvelle classe" onClick={handleCreateClass} primary />
      <Table data={classes} columns={columns} itemsPerPage={5} />
    </div>
  );
}