import { useNavigate } from 'react-router-dom'

const Groups = () => {
  let navigate = useNavigate()

  const data = [
    {
      id: 1,
      name: 'Zarządzanie budżetem',
      project_supervisor: 'Wojciech Wawrzyniak',
      members_count: 3,
      first_term: 0,
      second_term: 0,
    },
    {
      id: 2,
      name: 'GatherUp',
      project_supervisor: 'Wojciech Wawrzyniak',
      members_count: 4,
      first_term: 0,
      second_term: 0,
    },
  ]

  return (
    <div>
      <button
        className="btn btn-success"
        onClick={() => navigate('/coordinator/add-group')}
      >
        Dodaj nową grupę
      </button>
      <div className="flex mx-auto mt-5 overflow-hidden overflow-x-auto border border-gray-100 rounded">
        <table className="min-w-full table table-compact">
          <thead>
            <tr className="bg-gray-50">
              <th>Nazwa</th>
              <th>Opiekun</th>
              <th>Liczba osób</th>
              <th>Semestr 1</th>
              <th>Semestr 2</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-100">
            {data.map(
              ({
                id,
                name,
                project_supervisor,
                members_count,
                first_term,
                second_term,
              }) => (
                <tr key={id}>
                  <td>{name}</td>
                  <td>{project_supervisor}</td>
                  <td>{members_count}</td>
                  <td>{first_term}</td>
                  <td>{second_term}</td>
                </tr>
              ),
            )}
          </tbody>
        </table>
      </div>
    </div>
  )
}

export default Groups