import React from 'react';
import type { ThemeProviderProps } from '../theme/theme-provider';
import { ThemeProvider } from '../theme/theme-provider';
import { Flex } from '../atoms/flex';
import { Heading } from '../atoms/heading';
import { Box } from '../atoms/box';
import { Button } from '../atoms/button';

export interface GhostPostProps {
  defaultThemeProps?: Partial<ThemeProviderProps>;
  html?: string;
  title?: string;
  children?: React.ReactElement;
  onPageBack?: () => void;
}

export function GhostPost(props: GhostPostProps): React.ReactElement {
  const { defaultThemeProps, html, onPageBack } = props;
  return (
    <ThemeProvider
      {...defaultThemeProps}
      accentColor="iris"
      scaling="110%"
      style={{}}
    >
      {html ? (
        <Box mt="5" width="100%">
          <div
            className="gh-content"
            dangerouslySetInnerHTML={{ __html: html }}
          />
        </Box>
      ) : (
        <Flex
          align="center"
          direction="column"
          gap="6"
          height="100%"
          justify="center"
          width="100%"
        >
          <Heading variant="heading1">콘텐츠를 찾을 수 없습니다.</Heading>
          <Heading
            align="center"
            color="gray"
            variant="heading4"
            weight="regular"
          >
            {`요청하신 콘텐츠를 찾을 수 없습니다.
        잠시 후 다시 시도해주세요.`}
          </Heading>
          <Button onClick={onPageBack} size="large">
            뒤로가기
          </Button>
        </Flex>
      )}
    </ThemeProvider>
  );
}
