import React from "react";

import Button from "components/Button";
import {
  Card,
  CardActions,
  CardBody,
  CardBodyText,
  CardHeadline,
} from "components/cards";
import ErrorMessage from "components/ErrorMessage";

import Modal from "./Modal";

const RejectPostModalConfirm = ({
  title,
  children,
  yesActionLabel = "OK",
  yesAndArchiveActionLabel = "OK",
  cancelActionLabel = "Zrušit",
  onCancel,
  onConfirm,
  onConfirmAndArchive,
  confirming,
  error,
  ...props
}) => {
  return (
    <Modal containerClassName="max-w-md" onRequestClose={onCancel} {...props}>
      <Card>
        <CardBody>
          <div className="flex items-center justify-between mb-4">
            <CardHeadline>{title}</CardHeadline>
            <button onClick={onCancel} type="button">
              <i className="ico--cross"></i>
            </button>
          </div>
          <CardBodyText>{children}</CardBodyText>
          {error && (
            <ErrorMessage className="mt-2">
              Při provádění akce došlo k problému: {error}
            </ErrorMessage>
          )}
        </CardBody>
        <CardActions right className="space-x-1">
          <Button
            hoverActive
            color="blue-300"
            className="text-sm"
            onClick={onConfirm}
            loading={confirming}
          >
            {yesActionLabel}
          </Button>
          <Button
            hoverActive
            color="blue-300"
            className="text-sm"
            onClick={onConfirm}
            loading={confirming}
          >
            {yesAndArchiveActionLabel}
          </Button>
          <Button
            hoverActive
            color="red-600"
            className="text-sm"
            onClick={onCancel}
          >
            {cancelActionLabel}
          </Button>
        </CardActions>
      </Card>
    </Modal>
  );
};

export default React.memo(RejectPostModalConfirm);