lunchtime-web/src/frontend/src/components/modals/ExportSelectionModal.tsx

import React from "react";
import { Checkbox, Modal, Space, Typography } from "antd";

const { Text } = Typography;

export type ExportSelectionState = Record<string, boolean>;

export type ExportSelectionOption = {
  key: string;
  label: string;
};

export default function ExportSelectionModal({
  open,
  title,
  description,
  options,
  selected,
  okText = "Export",
  onCancel,
  onConfirm,
  onSelectedChange,
}: {
  open: boolean;
  title: string;
  description?: string;
  options: ExportSelectionOption[];
  selected: ExportSelectionState;
  okText?: string;
  onCancel: () => void;
  onConfirm: () => void;
  onSelectedChange: (next: ExportSelectionState) => void;
}) {
  return (
    <Modal
      title={title}
      open={open}
      onCancel={onCancel}
      onOk={onConfirm}
      okText={okText}
    >
      <Space direction="vertical" style={{ width: "100%" }}>
        {description ? <Text>{description}</Text> : null}

        {options.map((option) => (
          <Checkbox
            key={option.key}
            checked={!!selected[option.key]}
            onChange={(event) =>
              onSelectedChange({
                ...selected,
                [option.key]: event.target.checked,
              })
            }
          >
            {option.label}
          </Checkbox>
        ))}
      </Space>
    </Modal>
  );
}