import * as S from "./style";

const SEOPreview = (props: IHeadingsPreviewProps) => {
	const { actions } = props;
	const { toggleHeadingsPreviewAction, toggleKeywordsPreviewAction } = actions || {};

	return (
		<S.Wrapper>
			<S.TextWrapper>
				Quickly review page <strong>headings</strong> for correctness it before publishing. You can also edit the text.
			</S.TextWrapper>
			<S.ButtonWrapper>
				<S.StyledButton type="button" onClick={toggleHeadingsPreviewAction}>
					Open Headings preview
				</S.StyledButton>
			</S.ButtonWrapper>
			<S.TextWrapper margin>
				Review the <strong>Keywords</strong> of the page in a quick way before publishing.
			</S.TextWrapper>
			<S.ButtonWrapper>
				<S.StyledButton type="button" onClick={toggleKeywordsPreviewAction}>
					Open Keywords preview
				</S.StyledButton>
			</S.ButtonWrapper>
		</S.Wrapper>
	);
};

interface IHeadingsPreviewProps {
	actions?: {
		toggleHeadingsPreviewAction?: () => void;
		toggleKeywordsPreviewAction?: () => void;
	};
}

export default SEOPreview;
