import React from "react";
import { IAboutUsSection } from "~/admin/interfaces/aboutUsSection";

interface Props {
  sections: IAboutUsSection[];
  onEdit: (s: IAboutUsSection) => void;
  onDelete: (id: number) => void;
}

export const AboutUsSectionList = ({ sections, onEdit, onDelete }: Props) => {
  if (sections.length === 0) {
    return (
      <div className="card">
        <div className="card-body text-center py-5 text-muted">
          No hay secciones. Crea la primera con el botón «Nueva sección».
        </div>
      </div>
    );
  }

  return (
    <div className="card">
      <div className="card-body">
        <div className="table-responsive">
          <table className="table table-hover">
            <thead>
              <tr>
                <th className="text-center">Orden</th>
                <th className="text-center">Año</th>
                <th>Título</th>
                <th className="text-center">Imagen</th>
                <th className="text-center">Estado</th>
                <th className="text-center">Acciones</th>
              </tr>
            </thead>
            <tbody>
              {sections.map((s) => (
                <tr key={s.id}>
                  <td className="text-center">{s.sort_order}</td>
                  <td className="text-center">{s.year}</td>
                  <td>
                    <div className="font-weight-bold">{s.title}</div>
                    <small className="text-muted">{s.subtitle?.slice(0, 80)}{s.subtitle && s.subtitle.length > 80 ? "…" : ""}</small>
                  </td>
                  <td className="text-center align-middle">
                    {s.imageUrl ? (
                      <img
                        src={s.imageUrl}
                        alt=""
                        style={{ maxWidth: 72, maxHeight: 48, objectFit: "cover", borderRadius: 4 }}
                        loading="lazy"
                      />
                    ) : (
                      "—"
                    )}
                  </td>
                  <td className="text-center">
                    {s.status === 1 ? (
                      <span className="badge badge-success">Activo</span>
                    ) : (
                      <span className="badge badge-secondary">Inactivo</span>
                    )}
                  </td>
                  <td className="text-center">
                    <button
                      type="button"
                      className="btn btn-sm btn-outline-primary mr-1"
                      onClick={() => onEdit(s)}
                    >
                      <i className="fas fa-edit" />
                    </button>
                    <button
                      type="button"
                      className="btn btn-sm btn-outline-danger"
                      onClick={() => onDelete(s.id)}
                    >
                      <i className="fas fa-trash" />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};