import type { HTMLAttributes, ReactNode } from "react";
import { translateReactNode, usePlatformLanguage } from "../i18n/LanguageContext";

export type FloatingStatusProps = HTMLAttributes<HTMLDivElement> & {
  children: ReactNode;
};

export default function FloatingStatus({ children, className = "", role = "status", ...props }: FloatingStatusProps) {
  const { translateText } = usePlatformLanguage();

  return (
    <div
      {...props}
      role={role}
      className={["floating-status", className].filter(Boolean).join(" ")}
    >
      {translateReactNode(children, translateText)}
    </div>
  );
}