import { type ReactElement } from "react";
import type { DeviceInfo } from "../types";
import styles from "./DeviceInfo.module.css";
import { useDeviceInfo } from "../hooks/useDeviceInfo";
import { useParentWindow } from "../hooks/useParentWindow";

export function DeviceInfo(): ReactElement {
  const { isDeviceAPIAvailable } = useParentWindow();
  const deviceInfo = useDeviceInfo(isDeviceAPIAvailable);

  return (
    <div className={styles.container}>
      <span className={styles.title}>DeviceInfo:</span>
      <p className={styles.codeBlock}>
        <code>
          <pre>{JSON.stringify(deviceInfo, null, 2)}</pre>
        </code>
      </p>
    </div>
  );
}
