import { useTranslation } from "next-i18next";

import { Button, Modal, Table } from "@mantine/core";

export default function SignUpsModal({ open, close, event }) {
  const { t } = useTranslation("common");

  const copyMailAddresses = () => {
    const addresses = event.signUps.map((signUp) => signUp.email).join(", ");
    navigator.clipboard.writeText(addresses);
  };

  if (!event) return <></>;

  return (
    <Modal opened={open} onClose={close} size="xl">
      <h2>{t("participants")}</h2>
      <Table striped highlightOnHover>
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          {event.signUps.map((signUp, i) => (
            <tr key={i}>
              <td>
                {signUp.firstName} {signUp.lastName}
              </td>
              <td>{signUp.email}</td>
            </tr>
          ))}
        </tbody>
      </Table>

      <Button onClick={copyMailAddresses} mt="md">
        {t("copyMailAddresses")}
      </Button>
    </Modal>
  );
}