import React from "react";
import style from "./SelectOrganizationPopup.module.css";
import CloseIcon from "@mui/icons-material/Close";
import { MyOranizationsView } from "@core/Models/Company.model";

interface SelectOrganizationPopupProps {
    organizations: MyOranizationsView[];
    onClose: () => void;
    onSelect: (organizationId: string) => void;
}

export default function SelectOrganizationPopup({
    organizations,
    onClose,
    onSelect,
}: SelectOrganizationPopupProps) {
    return (
        <div className={style.overlay} onClick={onClose}>
            <div className={style.popup} onClick={(e) => e.stopPropagation()}>
                <div className={style.header}>
                    <h2>Selecciona una organización</h2>
                    <button className={style.closeButton} onClick={onClose}>
                        <CloseIcon />
                    </button>
                </div>
                <div className={style.content}>
                    {organizations.map((org) => (
                        <div
                            key={org.id}
                            className={style.organizationCard}
                            onClick={() => onSelect(org.id)}
                        >
                            <h3>{org.name}</h3>
                            <p>{org.description}</p>
                            <span
                                className={`${style.roleTag} ${
                                    org.isOwner
                                        ? style.organizationCardRolOwner
                                        : style.organizationCardRolCollaborator
                                }`}
                            >
                                {org.isOwner ? "Propietario" : "Colaborador"}
                            </span>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}
