import React from 'react';
import {BasePost, CardContainer, Post} from '@components';
import {Post as PostI} from '@modules/post/interfaces';

import ApproveRejectButtons from '../ApproveRejectButtons';
import {EditedPost} from './components/EditedPost';
import {styles} from './styles';

interface Props {
  onApprove?: () => void;
  onReject?: () => void;
  post: PostI;
  postContent?: Pick<PostI, 'bodyHtml'>;
  disableActions?: boolean;
}

const PostWithActions = ({
  post,
  postContent,
  onApprove,
  disableActions,
  onReject,
}: Props) => {
  const editedBodyHtml = postContent?.bodyHtml;
  const isEdited = !!editedBodyHtml;

  return (
    <CardContainer
      style={[styles.postContainer, !isEdited && styles.noPadding]}>
      {isEdited ? (
        <EditedPost post={post} editedBodyHtml={editedBodyHtml} />
      ) : (
        <Post post={post as BasePost} style={styles.post} />
      )}
      <ApproveRejectButtons
        disabled={disableActions}
        onApprove={onApprove}
        onReject={onReject}
      />
    </CardContainer>
  );
};
export default PostWithActions;
