import { type ReactElement } from "react";
import { Badge } from "./Badge";
import { useParentWindow } from "../hooks/useParentWindow";

export function DeviceAPIDetector(): ReactElement {
  const { isBrightSign, isDeviceAPIAvailable } = useParentWindow();
  return (
    <div style={{ textAlign: "left" }}>
      <p>
        <Badge status={isBrightSign ? "success" : "error"} />
        is BrightSign: {isBrightSign ? "Yes" : "No"}{" "}
      </p>
      <p>
        <Badge status={isDeviceAPIAvailable ? "success" : "error"} />
        is DeviceAPI Available: {isDeviceAPIAvailable ? "Yes" : "No"}{" "}
      </p>
    </div>
  );
}
