const { useState } = React;

function Phone({ children, dark = true }) {
  return (
    <div style={{
      width: 390, height: 800, borderRadius: 48,
      background: dark ? '#0A1330' : '#1B2D70',
      padding: 12, boxShadow: '0 30px 80px rgba(10,19,48,0.35)',
      position: 'relative'
    }}>
      <div style={{
        width: '100%', height: '100%', borderRadius: 38,
        background: '#fff', overflow: 'hidden', position: 'relative',
        display: 'flex', flexDirection: 'column'
      }}>
        <div style={{
          height: 44, padding: '0 28px', display: 'flex',
          alignItems: 'center', justifyContent: 'space-between',
          fontFamily: 'Inter', fontSize: 14, fontWeight: 600, color: '#0A1330',
          flexShrink: 0
        }}>
          <span>9:41</span>
          <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
            <span style={{ fontSize: 11 }}>●●●●</span>
            <span style={{ fontSize: 11 }}>📶</span>
            <span style={{ fontSize: 11 }}>🔋</span>
          </div>
        </div>
        <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
          {children}
        </div>
      </div>
    </div>
  );
}
window.SemogPhone = Phone;