import type { CSSProperties, ReactNode } from "react";

/**
 * Moldura de celular para o vídeo mobile (proporção 390x844 do vídeo; o recorte da tela segue a mesma conta).
 * Sem filhos, a tela mostra só o pôster.
 */
export function PhoneFrame({
  children,
  poster,
  className = "",
  style,
}: {
  children?: ReactNode;
  poster?: string;
  className?: string;
  style?: CSSProperties;
}) {
  return (
    <div className={`ds-phone ${className}`.trim()} style={style}>
      <div
        className="ds-phone-screen"
        style={poster ? { backgroundImage: `url(${poster})` } : undefined}
      >
        {children}
      </div>
    </div>
  );
}