front_directorio/src/components/Card/CardProfesores/CardProfesor.js

import React, { useState } from "react";
import "../Card.css";
import { PrivateRoutes, PublicRoutes } from "../../../models/routes";
import { useDeleteTeacher } from "../../../services/teacher.services";

const API_URL = process.env.REACT_APP_API_URL;

const CardProfesor = ({ profesor, edificioNombre, permissions }) => {
  const [showDialog, setShowDialog] = useState(false);
  const [confirmText, setConfirmText] = useState("");
  const { deleteTeacher } = useDeleteTeacher();
  const defaultImage =
    "https://static.vecteezy.com/system/resources/thumbnails/020/765/399/small_2x/default-profile-account-unknown-icon-black-silhouette-free-vector.jpg";
  const fotoProfesor = profesor.fotografia || defaultImage;

  const handleDeleteClick = () => {
    setShowDialog(true);
  };

  const handleConfirmDelete = async () => {
    if (confirmText.toLowerCase() === "aceptar") {
      await deleteTeacher(profesor.id_profesor);
      setShowDialog(false);
      setConfirmText("");
    }
  };

  const handleEditClick = () => {
    window.location.href = `${PrivateRoutes.EDITARPROFESOR}${profesor.id_profesor}`;
  };

  const handleViewProfesor = () => {
    window.location.href = `${PublicRoutes.DATAPROFESOR}${profesor.id_profesor}`;
  };

  return (
    <div className="card m-1">
      <div className="image">
        {fotoProfesor && fotoProfesor.startsWith("http") ? (
          <img
            src={fotoProfesor}
            className="imgProfe"
            alt={profesor.nombre}
            onClick={handleViewProfesor}
          />
        ) : (
          <img
            src={`${API_URL}/imagenes/${profesor.fotografia}`}
            className="imgProfe"
            alt={profesor.nombre}
            onClick={handleViewProfesor}
          />
        )}

        {permissions ? (
          <div
            className={`status-label ${
              profesor.activo ? "active" : "inactive"
            }`}
          >
            {profesor.activo ? "Activo" : "Inactivo"}
          </div>
        ) : null}
      </div>
      <div className="card-content">
        <h4 onClick={handleViewProfesor}>{profesor.nombre}</h4>
        <h6 onClick={handleViewProfesor}>{edificioNombre}</h6>

        <div className="button-group">
          {permissions ? (
            <>
              <button
                className="edit-button"
                onClick={handleEditClick}
                style={{ backgroundColor: "green" }}
              >
                Editar
              </button>
              <button
                className="delete-boton"
                onClick={handleDeleteClick}
                style={{ backgroundColor: "red" }}
              >
                Borrar
              </button>
            </>
          ) : null}
        </div>
      </div>

      {showDialog && (
        <div className="dialog">
          <p>
            ¿Deseas eliminar al profesor <strong>{profesor.nombre}</strong>?
          </p>
          <p>Para borrar al profesor, escribe "aceptar".</p>
          <input
            type="text"
            value={confirmText}
            onChange={(e) => setConfirmText(e.target.value)}
          />
          <div className="button-group">
            <button
              onClick={handleConfirmDelete}
              disabled={confirmText.toLowerCase() !== "aceptar"}
            >
              Confirmar
            </button>
            <button onClick={() => setShowDialog(false)}>Cancelar</button>
          </div>
        </div>
      )}
    </div>
  );
};

export default CardProfesor;