import React, {type ReactNode} from 'react';
import Layout from '@theme-original/DocItem/Layout';
import type LayoutType from '@theme/DocItem/Layout';
import type {WrapperProps} from '@docusaurus/types';
import {useDoc} from '@docusaurus/plugin-content-docs/client';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

type Props = WrapperProps<typeof LayoutType>;

export default function LayoutWrapper(props: Props): ReactNode {
  const {metadata, frontMatter} = useDoc();
  // Use the resolved og:image URL from metadata (already processed by Docusaurus)
  const image = metadata.image;

  return (
    <>
      {image && (
        <div style={{
          marginBottom: '1.5rem',
          borderRadius: '12px',
          overflow: 'hidden',
          boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
        }}>
          <img
            src={image}
            alt=""
            style={{
              width: '100%',
              display: 'block',
            }}
          />
        </div>
      )}
      <Layout {...props} />
    </>
  );
}
