const OSWindow = ({ title = "untitled", children, style = {}, variant = "default", onClick }) => {
  const colors = {
    default: { bg: '#FFFFFF', border: '#111111' },
    green: { bg: '#2E6F40', border: '#111111' },
    blue: { bg: '#2B5FD9', border: '#111111' },
  };
  const c = colors[variant] || colors.default;
  
  return (
    <div onClick={onClick} style={{
      border: '2px solid #111',
      background: '#fff',
      boxShadow: '6px 6px 0px #111',
      overflow: 'hidden',
      cursor: onClick ? 'pointer' : 'default',
      transition: 'transform 0.2s, box-shadow 0.2s',
      ...style,
    }}
    className="os-window"
    >
      <div style={{
        background: '#F4EFE6',
        borderBottom: '2px solid #111',
        padding: '8px 12px',
        display: 'flex',
        alignItems: 'center',
        gap: 8,
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <div className="os-dot" style={{ width: 12, height: 12, borderRadius: '50%', background: '#C13B2E', border: '1.5px solid #111' }} />
          <div className="os-dot" style={{ width: 12, height: 12, borderRadius: '50%', background: '#F7D46B', border: '1.5px solid #111' }} />
          <div className="os-dot" style={{ width: 12, height: 12, borderRadius: '50%', background: '#2E6F40', border: '1.5px solid #111' }} />
        </div>
        <span style={{
          fontFamily: 'var(--font-mono)',
          fontSize: 12,
          color: '#666',
          letterSpacing: '0.02em',
          flex: 1,
          textAlign: 'center',
          marginRight: 36,
        }}>{title}</span>
      </div>
      <div>{children}</div>
    </div>
  );
};

window.OSWindow = OSWindow;