'use client';
import Button from '@/components/button';
import Table, { Header } from '@/components/table';
import { useGetApi } from '@/hooks/use-get-api';
import { Administrador } from '@/types/administradores';
import React from 'react';

export default function Page() {
  const { data } = useGetApi<Administrador[]>('/administrador');

  const headers: Header<Administrador>[] = [
    { key: 'id_administrador', label: 'ID' },
    { key: 'nombre_usuario', label: 'Nombre de Usuario' },
    { key: 'correo', label: 'Correo' },
    {
      key: 'tipoUser',
      render: (_, row) => row.tipoUser.tipo,
      label: 'Tipo de Usuario',
    },
    {
      key: 'tipoUser',
      render: () => (
        <div className="d-flex gap-2">
          <Button className="w-100" disabled>
            Editar
          </Button>
          <Button variant="danger" className="w-100" disabled>
            Eliminar
          </Button>
        </div>
      ),
      label: 'Acciones',
    },
  ];

  return (
    <div>
      <div className="d-flex justify-content-between align-items-center my-3">
        <h1>Administradores</h1>
        <Button variant="primary">Agregar Administrador</Button>
      </div>
      {data && <Table headers={headers} data={data} />}
    </div>
  );
}
