DataScope26/WEB

1import "./InviteCard.css";2import { Loader } from "lucide-react";3import ButtonAlert from "./ButtonAlert";4 5const STATUS_META = {6  accepted: { label: "Aceptada", icon: "✓" },7  pending: { label: "Sin respuesta", icon: null },8  declined: { label: "Rechazada", icon: "✕" },9};10 11export default function InviteCard({ name, email, company, area, status, onDelete, isDeleting = false }) {12  const meta = STATUS_META[status];13 14  return (15    <div className="invite-card">16      <div className={`invite-card__badge invite-card__badge--${status}`}>17        {status === "pending" ? (18          <span className="invite-card__dots">19            <span></span><span></span><span></span>20          </span>21        ) : (22          meta.icon23        )}24      </div>25 26      <div className="invite-card__body">27        <p className="invite-card__name">{name}</p>28        <p className="invite-card__meta">{company} · {area}</p>29        <p className="invite-card__meta">{email}</p>30      </div>31 32      <div className="invite-card__actions">33        <span className={`invite-card__pill invite-card__pill--${status}`}>34          {meta.label}35        </span>36        {onDelete && (37          <ButtonAlert38            type="button"39            className="invite-card__delete"40            onClick={onDelete}41            disabled={isDeleting}42            aria-label={`Eliminar invitación de ${name}`}43          >44            {isDeleting ? <Loader size={16} className="invite-card__delete-spinner" /> : "Eliminar"}45          </ButtonAlert>46        )}47      </div>48    </div>49  );50}