// components/rinpo-phone-frame.jsx — physical phone device shell

function RinpoPhoneFrame({ children }) {
  const [time, setTime] = React.useState(formatTime());
  const [edge, setEdge] = React.useState(function () {
    return typeof window !== 'undefined' && window.matchMedia('(max-width: 720px)').matches;
  });

  React.useEffect(() => {
    const t = setInterval(function () { setTime(formatTime()); }, 30000);
    return function () { clearInterval(t); };
  }, []);

  React.useEffect(function () {
    const mq = window.matchMedia('(max-width: 720px)');
    const sync = function () { setEdge(mq.matches); };
    sync();
    mq.addEventListener('change', sync);
    return function () { mq.removeEventListener('change', sync); };
  }, []);

  return (
    <div className={'rinpo-device-wrap' + (edge ? ' rinpo-device-wrap--edge' : '')}>
      <div className="rinpo-device" role="application" aria-label="RINPO Phone">
        <div className="rinpo-device__island" aria-hidden="true">
          {window.RinpoAssets.brand.island}
        </div>
        <div className="rinpo-device__statusbar">
          <span className="rinpo-device__time">{time}</span>
          <div className="rinpo-device__status-icons" aria-hidden="true">
            <Icon name="signal" size={14} />
            <Icon name="wifi" size={14} />
            <Icon name="battery" size={14} />
          </div>
        </div>
        <div className="rinpo-device__viewport">
          {children}
        </div>
      </div>
    </div>
  );
}

function formatTime() {
  return new Date().toLocaleTimeString('en-IN', { hour: 'numeric', minute: '2-digit', hour12: true });
}

window.RinpoPhoneFrame = RinpoPhoneFrame;